From bdfb3a8b2bc510969b08733eff15979ef7a47930 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Wed, 6 May 2026 17:10:08 +0800
Subject: [PATCH] feat: redesign halaman create project dan task divisi dengan
 section card

- 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>
---
 .../[id]/(fitur-division)/task/create.tsx     | 131 +++++++----
 app/(application)/project/create.tsx          | 215 +++++++++++-------
 components/project/sectionListAddTask.tsx     |  57 ++---
 constants/Styles.ts                           |  25 ++
 4 files changed, 269 insertions(+), 159 deletions(-)

diff --git a/app/(application)/division/[id]/(fitur-division)/task/create.tsx b/app/(application)/division/[id]/(fitur-division)/task/create.tsx
index 6252ff4..ecb12cc 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/create.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/create.tsx
@@ -1,6 +1,5 @@
 import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
-import ButtonSelect from "@/components/buttonSelect";
 import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
@@ -187,13 +186,61 @@ export default function CreateTaskDivision() {
                   bg={colors.card}
                   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} />
-               <ButtonSelect value="Tambah Anggota" onPress={() => { router.push(`/division/${id}/task/create/member`); }} />
-               <SectionListAddTask />
-               {fileForm.length > 0 && (
-                  <View style={Styles.mb15}>
-                     <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
+
+               {/* Tanggal & Tugas */}
+               <View style={[
+                  Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }
+               ]}>
+                  <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}>
                         {fileForm.map((item, index) => {
                            const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
@@ -204,64 +251,66 @@ export default function CreateTaskDivision() {
                               <Pressable
                                  key={index}
                                  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' }]}>
                                     <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
                                  </View>
                                  <View style={Styles.flex1}>
                                     <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
-                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>
-                                       {ext.toUpperCase()}
-                                    </Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
                                  </View>
                               </Pressable>
                            )
                         })}
                      </View>
-                  </View>
-               )}
-               {entitiesMember.length > 0 && (
-                  <View style={Styles.mb15}>
-                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
-                        <Text style={Styles.textDefaultSemiBold}>Anggota</Text>
-                        <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{entitiesMember.length} orang</Text>
+                  )}
+               </View>
+
+               {/* Anggota */}
+               <View style={[
+                  Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { 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 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 }}>
                         {entitiesMember.map((item: { img: any; name: any; position?: string }, index: any) => (
                            <View
                               key={index}
-                              style={{
-                                 flexDirection: 'row',
-                                 alignItems: 'center',
-                                 backgroundColor: colors.card,
-                                 borderRadius: 10,
-                                 borderWidth: 1,
-                                 borderColor: colors.icon + '18',
-                                 paddingHorizontal: 12,
-                                 paddingVertical: 10,
-                                 gap: 12,
-                              }}
+                              style={[Styles.listItemCard, { borderColor: colors.icon + '18' }]}
                            >
                               <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
                               <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>{item.name}</Text>
                               {item.position && (
-                                 <View style={{
-                                    backgroundColor: colors.dimmed + '15',
-                                    borderRadius: 20,
-                                    paddingHorizontal: 8,
-                                    paddingVertical: 3,
-                                 }}>
-                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>
-                                       {item.position}
-                                    </Text>
+                                 <View style={[Styles.positionBadge, { backgroundColor: colors.dimmed + '15' }]}>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>{item.position}</Text>
                                  </View>
                               )}
                            </View>
                         ))}
                      </View>
-                  </View>
-               )}
+                  )}
+               </View>
 
             </View>
          </ScrollView>
diff --git a/app/(application)/project/create.tsx b/app/(application)/project/create.tsx
index e1623b9..9b74e04 100644
--- a/app/(application)/project/create.tsx
+++ b/app/(application)/project/create.tsx
@@ -1,6 +1,5 @@
 import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
-import ButtonSelect from "@/components/buttonSelect";
 import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
@@ -261,26 +260,23 @@ export default function CreateProject() {
             style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
-               {
-                  (entityUser.role == "supadmin" || entityUser.role == "developer")
-                  &&
-                  (
-                     <SelectForm
-                        label="Lembaga Desa"
-                        placeholder="Pilih Lembaga Desa"
-                        value={chooseGroup.label}
-                        required
-                        bg={colors.card}
-                        onPress={() => {
-                           setValChoose(chooseGroup.val);
-                           setValSelect("group");
-                           setSelect(true);
-                        }}
-                        error={error.group}
-                        errorText="Lembaga Desa tidak boleh kosong"
-                     />
-                  )
-               }
+               {(entityUser.role == "supadmin" || entityUser.role == "developer") && (
+                  <SelectForm
+                     label="Lembaga Desa"
+                     placeholder="Pilih Lembaga Desa"
+                     value={chooseGroup.label}
+                     required
+                     bg={colors.card}
+                     onPress={() => {
+                        setValChoose(chooseGroup.val);
+                        setValSelect("group");
+                        setSelect(true);
+                     }}
+                     error={error.group}
+                     errorText="Lembaga Desa tidak boleh kosong"
+                  />
+               )}
+
                <InputForm
                   label="Kegiatan"
                   type="default"
@@ -290,39 +286,68 @@ export default function CreateProject() {
                   value={dataForm.title}
                   error={error.title}
                   errorText="Nama kegiatan tidak boleh kosong"
-                  onChange={(val) => {
-                     validationForm("title", val);
-                  }}
+                  onChange={(val) => validationForm("title", val)}
                />
-               <ButtonSelect
-                  value="Tambah Tanggal & Tugas"
-                  onPress={() => {
-                     router.push(`/project/create/task`);
-                  }}
-                  error={error.task}
-                  errorText="Tanggal & Tugas tidak boleh kosong"
-               />
-               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
-               <ButtonSelect
-                  value="Pilih Anggota"
-                  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`);
-                     }
-                  }}
-                  error={error.member}
-                  errorText="Anggota tidak boleh kosong"
-               />
-               <SectionListAddTask />
-               {fileForm.length > 0 && (
-                  <View style={Styles.mb15}>
-                     <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
+
+               {/* Tanggal & Tugas */}
+               <View style={[
+                  Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: error.task ? colors.error + '50' : colors.icon + '18' }
+               ]}>
+                  <Pressable
+                     onPress={() => router.push(`/project/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} />}
+                  {error.task && (
+                     <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}>
                         {fileForm.map((item, index) => {
                            const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
@@ -333,64 +358,82 @@ export default function CreateProject() {
                               <Pressable
                                  key={index}
                                  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' }]}>
                                     <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
                                  </View>
                                  <View style={Styles.flex1}>
                                     <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
-                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>
-                                       {ext.toUpperCase()}
-                                    </Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
                                  </View>
                               </Pressable>
                            )
                         })}
                      </View>
-                  </View>
-               )}
-               {entitiesMember.length > 0 && (
-                  <View style={Styles.mb15}>
-                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
-                        <Text style={Styles.textDefaultSemiBold}>Anggota</Text>
-                        <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{entitiesMember.length} orang</Text>
+                  )}
+               </View>
+
+               {/* Anggota */}
+               <View style={[
+                  Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { 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 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 }}>
                         {entitiesMember.map((item: { img: any; name: any; position?: string }, index: any) => (
                            <View
                               key={index}
-                              style={{
-                                 flexDirection: 'row',
-                                 alignItems: 'center',
-                                 backgroundColor: colors.card,
-                                 borderRadius: 10,
-                                 borderWidth: 1,
-                                 borderColor: colors.icon + '18',
-                                 paddingHorizontal: 12,
-                                 paddingVertical: 10,
-                                 gap: 12,
-                              }}
+                              style={[Styles.listItemCard, { borderColor: colors.icon + '18' }]}
                            >
                               <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
                               <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>{item.name}</Text>
                               {item.position && (
-                                 <View style={{
-                                    backgroundColor: colors.dimmed + '15',
-                                    borderRadius: 20,
-                                    paddingHorizontal: 8,
-                                    paddingVertical: 3,
-                                 }}>
-                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>
-                                       {item.position}
-                                    </Text>
+                                 <View style={[Styles.positionBadge, { backgroundColor: colors.dimmed + '15' }]}>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>{item.position}</Text>
                                  </View>
                               )}
                            </View>
                         ))}
                      </View>
-                  </View>
-               )}
+                  )}
+                  {error.member && (
+                     <Text style={[Styles.textMediumNormal, Styles.mt05, { color: colors.error }]}>
+                        Anggota tidak boleh kosong
+                     </Text>
+                  )}
+               </View>
+
             </View>
          </ScrollView>
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
diff --git a/components/project/sectionListAddTask.tsx b/components/project/sectionListAddTask.tsx
index a403412..345a159 100644
--- a/components/project/sectionListAddTask.tsx
+++ b/components/project/sectionListAddTask.tsx
@@ -10,7 +10,7 @@ import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
 import MenuItemRow from "../menuItemRow";
 import Text from "../Text";
 
-export default function SectionListAddTask() {
+export default function SectionListAddTask({ showTitle = true }: { showTitle?: boolean }) {
    const { colors } = useTheme();
    const taskCreate = useSelector((state: any) => state.taskCreate)
    const [select, setSelect] = useState<any>(null)
@@ -22,39 +22,32 @@ export default function SectionListAddTask() {
       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 (
       <>
-         {
-            taskCreate.length > 0
-            &&
+         {taskCreate.length > 0 && (
             <>
-               <View style={[Styles.mb15, Styles.mt10]}>
-                  <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
-                     Tanggal & Tugas
-                  </Text>
-                  {
-                     taskCreate.map((item: { status: number; title: string; dateStart: string; dateEnd: string; }, index: Key | null | undefined) => {
-                        return (
-                           <ItemSectionTanggalTugas
-                              key={index}
-                              title={item.title}
-                              dateStart={item.dateStart}
-                              dateEnd={item.dateEnd}
-                              onPress={() => {
-                                 setSelect(index)
-                                 setModal(true)
-                              }}
-                           />
-                        );
-                     })
-                  }
-               </View>
-               <DrawerBottom
-                  animation="slide"
-                  isVisible={isModal}
-                  setVisible={setModal}
-                  title="Menu"
-               >
+               {showTitle ? (
+                  <View style={[Styles.mb15, Styles.mt10]}>
+                     <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
+                     {items}
+                  </View>
+               ) : (
+                  <View>{items}</View>
+               )}
+               <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
                   <View style={Styles.rowItemsCenter}>
                      <MenuItemRow
                         icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
@@ -64,7 +57,7 @@ export default function SectionListAddTask() {
                   </View>
                </DrawerBottom>
             </>
-         }
+         )}
       </>
    )
 }
\ No newline at end of file
diff --git a/constants/Styles.ts b/constants/Styles.ts
index 6348a68..976a1aa 100644
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -891,6 +891,31 @@ const Styles = StyleSheet.create({
       alignItems: 'center',
       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: {
       flex: 1
    },