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

feat: redesign halaman create project dan task divisi dengan section card

Browse Source 
- Ganti ButtonSelect dengan section card (Tanggal & Tugas, File, Anggota)
- Tiap card: header pressable dengan icon, badge count, chevron, dan preview isi
- Background item list (file & anggota) dibuat transparan (hanya border)
- Badge file seragam dengan badge tugas dan orang
- Tambah prop showTitle pada SectionListAddTask
- Ekstrak inline style ke Styles.ts: sectionActionRow, sectionBadge, positionBadge, listItemCard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
amaliadwiy
2026-05-06 17:10:08 +08:00
parent 11bb1ddc98
commit bdfb3a8b2b
4 changed files with 269 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,5 @@
import AppHeader from "@/components/AppHeader"; import AppHeader from "@/components/AppHeader";
import ButtonSaveHeader from "@/components/buttonSaveHeader"; import ButtonSaveHeader from "@/components/buttonSaveHeader";
import ButtonSelect from "@/components/buttonSelect";
import DrawerBottom from "@/components/drawerBottom"; import DrawerBottom from "@/components/drawerBottom";
import ImageUser from "@/components/imageNew"; import ImageUser from "@/components/imageNew";
import { InputForm } from "@/components/inputForm"; import { InputForm } from "@/components/inputForm";
@@ -187,13 +186,61 @@ export default function CreateTaskDivision() {
bg={colors.card} bg={colors.card}
errorText="Judul Tugas tidak boleh kosong" errorText="Judul Tugas tidak boleh kosong"
/> />
<ButtonSelect value="Tambah Tanggal & Tugas" onPress={() => { router.push(`/division/${id}/task/create/task`); }} />
<ButtonSelect value="Upload File" onPress={pickDocumentAsync} /> {/* Tanggal & Tugas */}
<ButtonSelect value="Tambah Anggota" onPress={() => { router.push(`/division/${id}/task/create/member`); }} /> <View style={[
<SectionListAddTask /> Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
{fileForm.length > 0 && ( { backgroundColor: colors.card, borderColor: colors.icon + '18' }
<View style={Styles.mb15}> ]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text> <Pressable
onPress={() => router.push(`/division/${id}/task/create/task`)}
style={[Styles.sectionActionRow, { marginBottom: taskCreate.length > 0 ? 12 : 0 }]}
>
<View style={[Styles.sectionIconBox, { backgroundColor: colors.tabActive + '18' }]}>
<MaterialCommunityIcons name="calendar-check-outline" size={18} color={colors.tabActive} />
</View>
<View style={Styles.flex1}>
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Tanggal & Tugas</Text>
{taskCreate.length === 0 && (
<Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Belum ada tugas ditambahkan</Text>
)}
</View>
{taskCreate.length > 0 && (
<View style={[Styles.sectionBadge, { backgroundColor: colors.tabActive + '18' }]}>
<Text style={[Styles.textSmallSemiBold, { color: colors.tabActive }]}>{taskCreate.length} tugas</Text>
</View>
)}
<MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
</Pressable>
{taskCreate.length > 0 && <SectionListAddTask showTitle={false} />}
</View>
{/* File */}
<View style={[
Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
{ backgroundColor: colors.card, borderColor: colors.icon + '18' }
]}>
<Pressable
onPress={pickDocumentAsync}
style={[Styles.sectionActionRow, { marginBottom: fileForm.length > 0 ? 12 : 0 }]}
>
<View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '15' }]}>
<MaterialCommunityIcons name="paperclip" size={18} color={colors.dimmed} />
</View>
<View style={Styles.flex1}>
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>File</Text>
{fileForm.length === 0 && (
<Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Opsional — ketuk untuk upload</Text>
)}
</View>
{fileForm.length > 0 && (
<View style={[Styles.sectionBadge, { backgroundColor: colors.dimmed + '18' }]}>
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{fileForm.length} file</Text>
</View>
)}
<MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
</Pressable>
{fileForm.length > 0 && (
<View style={Styles.fileGrid}> <View style={Styles.fileGrid}>
{fileForm.map((item, index) => { {fileForm.map((item, index) => {
const ext = item.name.split('.').pop()?.toLowerCase() ?? '' const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
@@ -204,64 +251,66 @@ export default function CreateTaskDivision() {
<Pressable <Pressable
key={index} key={index}
onPress={() => { setIndexDelFile(index); setModal(true) }} onPress={() => { setIndexDelFile(index); setModal(true) }}
style={[Styles.fileCard, { backgroundColor: colors.card, borderColor: colors.icon + '18' }]} style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
> >
<View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}> <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
<MaterialCommunityIcons name={iconName} size={18} color={iconColor} /> <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
</View> </View>
<View style={Styles.flex1}> <View style={Styles.flex1}>
<Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text> <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}> <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
{ext.toUpperCase()}
</Text>
</View> </View>
</Pressable> </Pressable>
) )
})} })}
</View> </View>
</View> )}
)} </View>
{entitiesMember.length > 0 && (
<View style={Styles.mb15}> {/* Anggota */}
<View style={[Styles.rowSpaceBetween, Styles.mv05]}> <View style={[
<Text style={Styles.textDefaultSemiBold}>Anggota</Text> Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
<Text style={[Styles.textDefault, { color: colors.dimmed }]}>{entitiesMember.length} orang</Text> { backgroundColor: colors.card, borderColor: colors.icon + '18' }
]}>
<Pressable
onPress={() => router.push(`/division/${id}/task/create/member`)}
style={[Styles.sectionActionRow, { marginBottom: entitiesMember.length > 0 ? 12 : 0 }]}
>
<View style={[Styles.sectionIconBox, { backgroundColor: colors.tabActive + '18' }]}>
<MaterialCommunityIcons name="account-group-outline" size={18} color={colors.tabActive} />
</View> </View>
<View style={Styles.flex1}>
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Anggota</Text>
{entitiesMember.length === 0 && (
<Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Belum ada anggota dipilih</Text>
)}
</View>
{entitiesMember.length > 0 && (
<View style={[Styles.sectionBadge, { backgroundColor: colors.tabActive + '18' }]}>
<Text style={[Styles.textSmallSemiBold, { color: colors.tabActive }]}>{entitiesMember.length} orang</Text>
</View>
)}
<MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
</Pressable>
{entitiesMember.length > 0 && (
<View style={{ gap: 6 }}> <View style={{ gap: 6 }}>
{entitiesMember.map((item: { img: any; name: any; position?: string }, index: any) => ( {entitiesMember.map((item: { img: any; name: any; position?: string }, index: any) => (
<View <View
key={index} key={index}
style={{ style={[Styles.listItemCard, { borderColor: colors.icon + '18' }]}
flexDirection: 'row',
alignItems: 'center',
backgroundColor: colors.card,
borderRadius: 10,
borderWidth: 1,
borderColor: colors.icon + '18',
paddingHorizontal: 12,
paddingVertical: 10,
gap: 12,
}}
> >
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" /> <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
<Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>{item.name}</Text> <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>{item.name}</Text>
{item.position && ( {item.position && (
<View style={{ <View style={[Styles.positionBadge, { backgroundColor: colors.dimmed + '15' }]}>
backgroundColor: colors.dimmed + '15', <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>{item.position}</Text>
borderRadius: 20,
paddingHorizontal: 8,
paddingVertical: 3,
}}>
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>
{item.position}
</Text>
</View> </View>
)} )}
</View> </View>
))} ))}
</View> </View>
</View> )}
)} </View>
</View> </View>
</ScrollView> </ScrollView>

215
app/(application)/project/create.tsx
View File

@@ -1,6 +1,5 @@
import AppHeader from "@/components/AppHeader"; import AppHeader from "@/components/AppHeader";
import ButtonSaveHeader from "@/components/buttonSaveHeader"; import ButtonSaveHeader from "@/components/buttonSaveHeader";
import ButtonSelect from "@/components/buttonSelect";
import DrawerBottom from "@/components/drawerBottom"; import DrawerBottom from "@/components/drawerBottom";
import ImageUser from "@/components/imageNew"; import ImageUser from "@/components/imageNew";
import { InputForm } from "@/components/inputForm"; import { InputForm } from "@/components/inputForm";
@@ -261,26 +260,23 @@ export default function CreateProject() {
style={[Styles.h100, { backgroundColor: colors.background }]} style={[Styles.h100, { backgroundColor: colors.background }]}
> >
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
{ {(entityUser.role == "supadmin" || entityUser.role == "developer") && (
(entityUser.role == "supadmin" || entityUser.role == "developer") <SelectForm
&& label="Lembaga Desa"
( placeholder="Pilih Lembaga Desa"
<SelectForm value={chooseGroup.label}
label="Lembaga Desa" required
placeholder="Pilih Lembaga Desa" bg={colors.card}
value={chooseGroup.label} onPress={() => {
required setValChoose(chooseGroup.val);
bg={colors.card} setValSelect("group");
onPress={() => { setSelect(true);
setValChoose(chooseGroup.val); }}
setValSelect("group"); error={error.group}
setSelect(true); errorText="Lembaga Desa tidak boleh kosong"
}} />
error={error.group} )}
errorText="Lembaga Desa tidak boleh kosong"
/>
)
}
<InputForm <InputForm
label="Kegiatan" label="Kegiatan"
type="default" type="default"
@@ -290,39 +286,68 @@ export default function CreateProject() {
value={dataForm.title} value={dataForm.title}
error={error.title} error={error.title}
errorText="Nama kegiatan tidak boleh kosong" errorText="Nama kegiatan tidak boleh kosong"
onChange={(val) => { onChange={(val) => validationForm("title", val)}
validationForm("title", val);
}}
/> />
<ButtonSelect
value="Tambah Tanggal & Tugas" {/* Tanggal & Tugas */}
onPress={() => { <View style={[
router.push(`/project/create/task`); Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
}} { backgroundColor: colors.card, borderColor: error.task ? colors.error + '50' : colors.icon + '18' }
error={error.task} ]}>
errorText="Tanggal & Tugas tidak boleh kosong" <Pressable
/> onPress={() => router.push(`/project/create/task`)}
<ButtonSelect value="Upload File" onPress={pickDocumentAsync} /> style={[Styles.sectionActionRow, { marginBottom: taskCreate.length > 0 ? 12 : 0 }]}
<ButtonSelect >
value="Pilih Anggota" <View style={[Styles.sectionIconBox, { backgroundColor: colors.tabActive + '18' }]}>
onPress={() => { <MaterialCommunityIcons name="calendar-check-outline" size={18} color={colors.tabActive} />
if (entityUser.role == "supadmin" || entityUser.role == "developer") { </View>
if (chooseGroup.val != "") { <View style={Styles.flex1}>
router.push(`/project/create/member`); <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Tanggal & Tugas</Text>
} else { {taskCreate.length === 0 && (
Toast.show({ type: 'small', text1: "Pilih Lembaga Desa terlebih dahulu", }) <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Belum ada tugas ditambahkan</Text>
} )}
} else { </View>
router.push(`/project/create/member`); {taskCreate.length > 0 && (
} <View style={[Styles.sectionBadge, { backgroundColor: colors.tabActive + '18' }]}>
}} <Text style={[Styles.textSmallSemiBold, { color: colors.tabActive }]}>{taskCreate.length} tugas</Text>
error={error.member} </View>
errorText="Anggota tidak boleh kosong" )}
/> <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
<SectionListAddTask /> </Pressable>
{fileForm.length > 0 && ( {taskCreate.length > 0 && <SectionListAddTask showTitle={false} />}
<View style={Styles.mb15}> {error.task && (
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text> <Text style={[Styles.textMediumNormal, Styles.mt05, { color: colors.error }]}>
Tanggal & Tugas tidak boleh kosong
</Text>
)}
</View>
{/* File */}
<View style={[
Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
{ backgroundColor: colors.card, borderColor: colors.icon + '18' }
]}>
<Pressable
onPress={pickDocumentAsync}
style={[Styles.sectionActionRow, { marginBottom: fileForm.length > 0 ? 12 : 0 }]}
>
<View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '15' }]}>
<MaterialCommunityIcons name="paperclip" size={18} color={colors.dimmed} />
</View>
<View style={Styles.flex1}>
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>File</Text>
{fileForm.length === 0 && (
<Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Opsional — ketuk untuk upload</Text>
)}
</View>
{fileForm.length > 0 && (
<View style={[Styles.sectionBadge, { backgroundColor: colors.dimmed + '18' }]}>
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{fileForm.length} file</Text>
</View>
)}
<MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
</Pressable>
{fileForm.length > 0 && (
<View style={Styles.fileGrid}> <View style={Styles.fileGrid}>
{fileForm.map((item, index) => { {fileForm.map((item, index) => {
const ext = item.name.split('.').pop()?.toLowerCase() ?? '' const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
@@ -333,64 +358,82 @@ export default function CreateProject() {
<Pressable <Pressable
key={index} key={index}
onPress={() => { setIndexDelFile(index); setModal(true) }} onPress={() => { setIndexDelFile(index); setModal(true) }}
style={[Styles.fileCard, { backgroundColor: colors.card, borderColor: colors.icon + '18' }]} style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
> >
<View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}> <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
<MaterialCommunityIcons name={iconName} size={18} color={iconColor} /> <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
</View> </View>
<View style={Styles.flex1}> <View style={Styles.flex1}>
<Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text> <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}> <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
{ext.toUpperCase()}
</Text>
</View> </View>
</Pressable> </Pressable>
) )
})} })}
</View> </View>
</View> )}
)} </View>
{entitiesMember.length > 0 && (
<View style={Styles.mb15}> {/* Anggota */}
<View style={[Styles.rowSpaceBetween, Styles.mv05]}> <View style={[
<Text style={Styles.textDefaultSemiBold}>Anggota</Text> Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
<Text style={[Styles.textDefault, { color: colors.dimmed }]}>{entitiesMember.length} orang</Text> { backgroundColor: colors.card, borderColor: error.member ? colors.error + '50' : colors.icon + '18' }
]}>
<Pressable
onPress={() => {
if (entityUser.role == "supadmin" || entityUser.role == "developer") {
if (chooseGroup.val != "") {
router.push(`/project/create/member`);
} else {
Toast.show({ type: 'small', text1: "Pilih Lembaga Desa terlebih dahulu" })
}
} else {
router.push(`/project/create/member`);
}
}}
style={[Styles.sectionActionRow, { marginBottom: entitiesMember.length > 0 ? 12 : 0 }]}
>
<View style={[Styles.sectionIconBox, { backgroundColor: colors.tabActive + '18' }]}>
<MaterialCommunityIcons name="account-group-outline" size={18} color={colors.tabActive} />
</View> </View>
<View style={Styles.flex1}>
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Anggota</Text>
{entitiesMember.length === 0 && (
<Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Belum ada anggota dipilih</Text>
)}
</View>
{entitiesMember.length > 0 && (
<View style={[Styles.sectionBadge, { backgroundColor: colors.tabActive + '18' }]}>
<Text style={[Styles.textSmallSemiBold, { color: colors.tabActive }]}>{entitiesMember.length} orang</Text>
</View>
)}
<MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
</Pressable>
{entitiesMember.length > 0 && (
<View style={{ gap: 6 }}> <View style={{ gap: 6 }}>
{entitiesMember.map((item: { img: any; name: any; position?: string }, index: any) => ( {entitiesMember.map((item: { img: any; name: any; position?: string }, index: any) => (
<View <View
key={index} key={index}
style={{ style={[Styles.listItemCard, { borderColor: colors.icon + '18' }]}
flexDirection: 'row',
alignItems: 'center',
backgroundColor: colors.card,
borderRadius: 10,
borderWidth: 1,
borderColor: colors.icon + '18',
paddingHorizontal: 12,
paddingVertical: 10,
gap: 12,
}}
> >
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" /> <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
<Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>{item.name}</Text> <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>{item.name}</Text>
{item.position && ( {item.position && (
<View style={{ <View style={[Styles.positionBadge, { backgroundColor: colors.dimmed + '15' }]}>
backgroundColor: colors.dimmed + '15', <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>{item.position}</Text>
borderRadius: 20,
paddingHorizontal: 8,
paddingVertical: 3,
}}>
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>
{item.position}
</Text>
</View> </View>
)} )}
</View> </View>
))} ))}
</View> </View>
</View> )}
)} {error.member && (
<Text style={[Styles.textMediumNormal, Styles.mt05, { color: colors.error }]}>
Anggota tidak boleh kosong
</Text>
)}
</View>
</View> </View>
</ScrollView> </ScrollView>
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu"> <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">

57
components/project/sectionListAddTask.tsx
View File

@@ -10,7 +10,7 @@ import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
import MenuItemRow from "../menuItemRow"; import MenuItemRow from "../menuItemRow";
import Text from "../Text"; import Text from "../Text";
export default function SectionListAddTask() { export default function SectionListAddTask({ showTitle = true }: { showTitle?: boolean }) {
const { colors } = useTheme(); const { colors } = useTheme();
const taskCreate = useSelector((state: any) => state.taskCreate) const taskCreate = useSelector((state: any) => state.taskCreate)
const [select, setSelect] = useState<any>(null) const [select, setSelect] = useState<any>(null)
@@ -22,39 +22,32 @@ export default function SectionListAddTask() {
setModal(false) setModal(false)
} }
const items = taskCreate.map((item: { status: number; title: string; dateStart: string; dateEnd: string; }, index: Key | null | undefined) => (
<ItemSectionTanggalTugas
key={index}
title={item.title}
dateStart={item.dateStart}
dateEnd={item.dateEnd}
onPress={() => {
setSelect(index)
setModal(true)
}}
/>
))
return ( return (
<> <>
{ {taskCreate.length > 0 && (
taskCreate.length > 0
&&
<> <>
<View style={[Styles.mb15, Styles.mt10]}> {showTitle ? (
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}> <View style={[Styles.mb15, Styles.mt10]}>
Tanggal & Tugas <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
</Text> {items}
{ </View>
taskCreate.map((item: { status: number; title: string; dateStart: string; dateEnd: string; }, index: Key | null | undefined) => { ) : (
return ( <View>{items}</View>
<ItemSectionTanggalTugas )}
key={index} <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
title={item.title}
dateStart={item.dateStart}
dateEnd={item.dateEnd}
onPress={() => {
setSelect(index)
setModal(true)
}}
/>
);
})
}
</View>
<DrawerBottom
animation="slide"
isVisible={isModal}
setVisible={setModal}
title="Menu"
>
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash-outline" color={colors.text} size={25} />} icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
@@ -64,7 +57,7 @@ export default function SectionListAddTask() {
</View> </View>
</DrawerBottom> </DrawerBottom>
</> </>
} )}
</> </>
) )
} }

25
constants/Styles.ts
View File

@@ -891,6 +891,31 @@ const Styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
gap: 10, gap: 10,
}, },
sectionActionRow: {
flexDirection: 'row',
alignItems: 'center',
gap: 10,
},
sectionBadge: {
borderRadius: 10,
paddingHorizontal: 8,
paddingVertical: 2,
},
positionBadge: {
borderRadius: 20,
paddingHorizontal: 8,
paddingVertical: 3,
},
listItemCard: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'transparent',
borderRadius: 10,
borderWidth: 1,
paddingHorizontal: 12,
paddingVertical: 10,
gap: 12,
},
flex1: { flex1: {
flex: 1 flex: 1
}, },