Component

Add:
- Badge
- Container

Voting
Add:
- screens/Voting

Fix:
- (tabs)/ index, contribution, status

# No Issue

app/(application)/(user)/_layout.tsx

@@ -165,14 +165,8 @@ export default function UserLayout() {
             headerLeft: () => <BackButton path="/home" />,
           }}
         />
+       
         {/* <Stack.Screen
-          name="voting/[id]/index"
-          options={{
-            title: "Detail Voting",
-            headerLeft: () => <BackButton />,
-          }}
-        />
-        <Stack.Screen
           name="voting/[id]/edit"
           options={{
             title: "Edit Voting",

app/(application)/(user)/voting/(tabs)/contribution.tsx

@@ -1,9 +1,27 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BadgeCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
+import { GStyles } from "@/styles/global-styles";
 
 export default function VotingContribution() {
+  const bottomComponent = (
+    <StackCustom>
+      <TextCustom align="center">Pilihan Anda:</TextCustom>
+      <BadgeCustom style={[GStyles.alignSelfCenter]}>Pilihan 1</BadgeCustom>
+    </StackCustom>
+  );
   return (
-    <ViewWrapper>
-      <TextCustom>Voting Contribution</TextCustom>
+    <ViewWrapper hideFooter>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <Voting_BoxPublishSection
+          key={index}
+          bottomComponent={bottomComponent}
+        />
+      ))}
     </ViewWrapper>
   );
 }

app/(application)/(user)/voting/(tabs)/index.tsx

@@ -1,9 +1,23 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  FloatingButton,
+  SearchInput,
+  ViewWrapper
+} from "@/components";
+import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
+import { router } from "expo-router";
 
 export default function VotingBeranda() {
   return (
-    <ViewWrapper>
-      <TextCustom>Voting Beranda</TextCustom>
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/voting/create")} />
+      }
+      headerComponent={<SearchInput placeholder="Cari voting" />}
+    >
+      {Array.from({ length: 5 }).map((_, index) => (
+        <Voting_BoxPublishSection key={index} />
+      ))}
     </ViewWrapper>
   );
 }

app/(application)/(user)/voting/(tabs)/status.tsx

@@ -1,9 +1,61 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BadgeCustom,
+  BaseBox,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import { masterStatus } from "@/lib/dummy-data/_master/status";
+import dayjs from "dayjs";
+import { useState } from "react";
 
 export default function VotingStatus() {
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={masterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
   return (
-    <ViewWrapper>
-      <TextCustom>Voting Status</TextCustom>
+    <ViewWrapper headerComponent={scrollComponent} hideFooter>
+      {Array.from({ length: 10 }).map((_, i) => (
+        <BaseBox
+          key={i}
+          paddingTop={20}
+          paddingBottom={20}
+          // href={`/job/${e.id}/${activeCategory}/detail`}
+          // onPress={() => console.log("pressed")}
+        >
+          <StackCustom>
+            <TextCustom align="center" bold truncate size="large">
+              Lorem ipsum dolor sit {activeCategory}
+            </TextCustom>
+            <BadgeCustom
+              style={{ width: "70%", alignSelf: "center" }}
+              variant="light"
+            >
+              {dayjs().format("DD/MM/YYYY")} -{" "}
+              {dayjs().add(1, "day").format("DD/MM/YYYY")}
+            </BadgeCustom>
+          </StackCustom>
+        </BaseBox>
+      ))}
     </ViewWrapper>
   );
 }

app/(application)/(user)/voting/create.tsx

@@ -1,9 +1,78 @@
-import { TextInputCustom, ViewWrapper } from "@/components";
+import {
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
+import { MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { TouchableOpacity } from "react-native";
 
 export default function CreateVoting() {
+  const buttonSubmit = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            onPress={() =>
+              router.replace("/(application)/(user)/voting/(tabs)/status")
+            }
+          >
+            Simpan
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+
   return (
-    <ViewWrapper>
-      <TextInputCustom>Create Voting</TextInputCustom>
+    <ViewWrapper footerComponent={buttonSubmit()}>
+      <StackCustom gap={"xs"}>
+        <TextInputCustom
+          label="Judul Voting"
+          placeholder="MasukanJudul Voting"
+          required
+        />
+        <TextAreaCustom
+          label="Deskripsi"
+          placeholder="Masukan Deskripsi"
+          required
+          showCount
+          maxLength={1000}
+        />
+        <DateTimePickerCustom label="Mulai Voting" required />
+        <DateTimePickerCustom label="Voting Berakhir" required />
+
+        <Grid>
+          <Grid.Col span={10}>
+            <TextInputCustom
+              label="Pilihan"
+              placeholder="Masukan Pilihan"
+              required
+            />
+          </Grid.Col>
+          <Grid.Col
+            span={2}
+            style={{ alignItems: "center", justifyContent: "center" }}
+          >
+            <TouchableOpacity onPress={() => console.log("delete")}>
+              <Ionicons name="trash" size={24} color={MainColor.red} />
+            </TouchableOpacity>
+          </Grid.Col>
+        </Grid>
+
+        <ButtonCenteredOnly onPress={() => console.log("add")}>
+          Tambah Pilihan
+        </ButtonCenteredOnly>
+        <Spacing />
+      </StackCustom>
     </ViewWrapper>
   );
 }