Admin Event

Add:
- admin/event: Tambah halaman detail dan status

Component Admin
Add:
- ShareComponent/Admin/ActionIconPlus

Package:
Install: react-native-qrcode-svg && react-native-svg

### No Issue

app/(application)/admin/_layout.tsx

@@ -96,6 +96,16 @@ export default function AdminLayout() {
         <Stack.Screen name="voting/[id]/[status]/index" />
         <Stack.Screen name="voting/[id]/reject-input"/>
         {/* ================== Voting End ================== */}
+
+        {/* ================== Event Start ================== */}
+        <Stack.Screen name="event/index" />
+        <Stack.Screen name="event/[status]/status" />
+        <Stack.Screen name="event/type-of-event"/>
+        <Stack.Screen name="event/type-create"/>
+        <Stack.Screen name="event/type-update"/>
+        {/* <Stack.Screen name="event/[id]/[status]/index" />
+        <Stack.Screen name="event/[id]/reject-input"/> */}
+        {/* ================== Event End ================== */}
       </Stack>
 
       <DrawerAdmin

app/(application)/admin/app-information/index.tsx

@@ -1,18 +1,15 @@
 import {
-  ActionIcon,
   ScrollableCustom,
   StackCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
+import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import AdminAppInformation_BusinessFieldSection from "@/screens/Admin/App-Information/BusinessFieldSection";
 import AdminAppInformation_Bank from "@/screens/Admin/App-Information/InformationBankSection";
 import AdminAppInformation_StickerSection from "@/screens/Admin/App-Information/StickerSection";
-import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { useState } from "react";
-import { View } from "react-native";
 
 export default function AdminInformation() {
   const [activeCategory, setActiveCategory] = useState<string | null>("bank");
@@ -53,22 +50,17 @@ export default function AdminInformation() {
         <AdminComp_BoxTitle
           title={activePage}
           rightComponent={
-            <View style={{ flexDirection: "row" }}>
-              <ActionIcon
-                icon={
-                  <Ionicons name="add" size={ICON_SIZE_SMALL} color="black" />
+            <AdminActionIconPlus
+              onPress={() => {
+                if (activeCategory === "bank") {
+                  router.push("/admin/app-information/information-bank/create");
+                } else if (activeCategory === "business") {
+                  router.push("/admin/app-information/business-field/create");
+                } else if (activeCategory === "sticker") {
+                  router.push("/admin/app-information/sticker/create");
                 }
-                onPress={() => {
-                  if (activeCategory === "bank") {
-                    router.push("/admin/app-information/information-bank/create");
-                  } else if (activeCategory === "business") {
-                    router.push("/admin/app-information/business-field/create");
-                  } else if (activeCategory === "sticker") {
-                    router.push("/admin/app-information/sticker/create");
-                  }
-                }}
-              />
-            </View>
+              }}
+            />
           }
         />
         {renderContent()}

app/(application)/admin/event/[id]/[status]/index.tsx

@@ -0,0 +1,218 @@
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconDot, IconList } from "@/components/_Icon/IconComponent";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import dayjs from "dayjs";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React from "react";
+import QRCode from "react-native-qrcode-svg";
+
+export default function AdminEventDetail() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = React.useState(false);
+
+  const colorBadge = () => {
+    if (status === "publish") {
+      return MainColor.green;
+    } else if (status === "review") {
+      return MainColor.orange;
+    } else if (status === "reject") {
+      return MainColor.red;
+    } else {
+      return MainColor.placeholder;
+    }
+  };
+
+  const listData = [
+    {
+      label: "Pembuat Event",
+      value: `Bagas Banuna ${id}`,
+    },
+    {
+      label: "Judul Event",
+      value: `Event 123`,
+    },
+    {
+      label: "Status",
+      value: (
+        <BadgeCustom color={colorBadge()}>
+          {_.startCase(status as string)}
+        </BadgeCustom>
+      ),
+    },
+    {
+      label: "Lokasi",
+      value: "Lokasi Event",
+    },
+    {
+      label: "Tipe Acara",
+      value: "Tipe Acara",
+    },
+    {
+      label: "Mulai Event",
+      value: dayjs().format("DD/MM/YYYY HH:mm:ss"),
+    },
+    {
+      label: "Event Berakhir",
+      value: dayjs().add(3, "day").format("DD/MM/YYYY HH:mm:ss"),
+    },
+    {
+      label: "Deskripsi",
+      value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    },
+    // {
+    //   label: "Daftar Tipe Acara",
+    //   value: (
+    //     <>
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 1</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 2</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 3</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //       <List.Item
+    //         title={<TextCustom>Pilihan 4</TextCustom>}
+    //         left={(props) => (
+    //           <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+    //         )}
+    //       />
+    //     </>
+    //   ),
+    // },
+  ];
+
+  const rightComponent = (
+    <ActionIcon
+      icon={<IconDot size={ICON_SIZE_BUTTON} />}
+      onPress={() => {
+        setOpenDrawer(true);
+      }}
+    />
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle
+            title={`Detail Data`}
+            rightComponent={
+              (status === "publish" || status === "riwayat") && rightComponent
+            }
+          />
+        }
+      >
+        <BaseBox>
+          <StackCustom>
+            {listData.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+
+          <Spacing />
+        </BaseBox>
+        {(status === "publish" || status === "riwayat") && (
+          <BaseBox>
+            <StackCustom style={{ alignItems: "center" }}>
+              <TextCustom bold>QR Code Event</TextCustom>
+              <QRCode
+                value="https://google.com"
+                size={200}
+                // logo={require("@/assets/images/logo-hipmi.png")}
+                // logoSize={70}
+                // logoBackgroundColor="transparent"
+                // logoBorderRadius={50}
+                // color="black"
+              />
+            </StackCustom>
+          </BaseBox>
+        )}
+
+        {status === "review" && (
+          <AdminButtonReview
+            onPublish={() => {
+              AlertDefaultSystem({
+                title: "Publish",
+                message: "Apakah anda yakin ingin mempublikasikan data ini?",
+                textLeft: "Cancel",
+                textRight: "Publish",
+                onPressLeft: () => {
+                  router.back();
+                },
+                onPressRight: () => {
+                  router.back();
+                },
+              });
+            }}
+            onReject={() => {
+              router.push(`/admin/event/${id}/reject-input`);
+            }}
+          />
+        )}
+
+        {status === "reject" && (
+          <AdminButtonReject
+            title="Tambah Catatan"
+            onReject={() => {
+              router.push(`/admin/event/${id}/reject-input`);
+            }}
+          />
+        )}
+        <Spacing />
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Daftar Peserta",
+              icon: <IconList />,
+              path: `/admin/event/${id}/list-of-participants`,
+            },
+          ]}
+          onPressItem={(item) => {
+            setOpenDrawer(false);
+            router.push(item.path as any);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/admin/event/[id]/list-of-participants.tsx

@@ -0,0 +1,42 @@
+import { BadgeCustom, BaseBox, Grid, TextCustom, ViewWrapper } from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { MainColor } from "@/constants/color-palet";
+
+export default function AdminEventListOfParticipants() {
+
+    const isPresent = ({id}: {id: number}) => {
+        const check = id % 3 * 3;
+        if (check === 0) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Daftar Peserta" />}
+      >
+        {Array.from({ length: 10 }).map((item, index) => (
+          <BaseBox key={index}>
+            <Grid>
+              <Grid.Col span={6}>
+                <TextCustom bold>Username {index + 1}</TextCustom>
+                <TextCustom>+6282123456789</TextCustom>
+              </Grid.Col>
+              <Grid.Col span={6} style={{ justifyContent: "center" }}>
+                <BadgeCustom
+                  style={{ alignSelf: "flex-end" }}
+                  color={isPresent({id: index}) ? MainColor.green : MainColor.red}
+                >
+                  {isPresent({id: index}) ? "Hadir" : "Tidak Hadir"}
+                </BadgeCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/event/[id]/reject-input.tsx

@@ -0,0 +1,55 @@
+import {
+  AlertDefaultSystem,
+  BoxButtonOnFooter,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function AdminEventRejectInput() {
+  const { id } = useLocalSearchParams();
+  const [value, setValue] = useState(id as string);
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <AdminButtonReject
+        title="Reject"
+        onReject={() =>
+          AlertDefaultSystem({
+            title: "Reject",
+            message: "Apakah anda yakin ingin menolak data ini?",
+            textLeft: "Batal",
+            textRight: "Ya",
+            onPressLeft: () => {
+              router.back();
+            },
+            onPressRight: () => {
+              console.log("value:", value);
+              router.replace(`/admin/event/reject/status`);
+            },
+          })
+        }
+      />
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={buttonSubmit}
+        headerComponent={<AdminBackButtonAntTitle title="Masukan Alasan" />}
+      >
+        <TextAreaCustom
+          value={value}
+          onChangeText={setValue}
+          placeholder="Masukan alasan"
+          required
+          showCount
+          maxLength={1000}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/event/[status]/status.tsx

@@ -0,0 +1,76 @@
+import {
+  ActionIcon,
+  BaseBox,
+  SearchInput,
+  Spacing,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { Divider } from "react-native-paper";
+
+export default function AdminEventStatus() {
+  const { status } = useLocalSearchParams();
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Event" />}>
+        <AdminComp_BoxTitle
+          title={`${_.startCase(status as string)}`}
+          rightComponent={rightComponent}
+        />
+
+        <BaseBox>
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Judul Event"
+          />
+          <Spacing />
+          <Divider />
+
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <Octicons
+                      name="eye"
+                      size={ICON_SIZE_BUTTON}
+                      color="black"
+                    />
+                  }
+                  onPress={() => {
+                    router.push(`/admin/event/${index}/${status}`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2}>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Blanditiis asperiores quidem deleniti architecto eaque et
+                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/event/index.tsx

@@ -0,0 +1,55 @@
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
+import { IconArchive } from "@/components/_Icon";
+import {
+  IconList,
+  IconPublish,
+  IconReject,
+  IconReview,
+} from "@/components/_Icon/IconComponent";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+
+export default function AdminVoting() {
+  return (
+    <>
+      <ViewWrapper>
+        <AdminTitlePage title="Event" />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Publish",
+    value: 3,
+    icon: <IconPublish size={25} color={MainColor.green} />,
+  },
+  {
+    label: "Review",
+    value: 8,
+    icon: <IconReview size={25} color={MainColor.orange} />,
+  },
+  {
+    label: "Reject",
+    value: 4,
+    icon: <IconReject size={25} color={MainColor.red} />,
+  },
+  {
+    label: "Riwayat",
+    value: 6,
+    icon: <IconArchive size={25} color={MainColor.placeholder} />,
+  },
+  {
+    label: "Tipe Acara",
+    value: 7,
+    icon: <IconList size={25} color={MainColor.placeholder} />,
+  },
+];

app/(application)/admin/event/type-create.tsx

@@ -0,0 +1,27 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useRouter } from "expo-router";
+
+export default function AdminEventTypeOfEventCreate() {
+  const router = useRouter();
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Simpan</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Tambah Tipe Acara" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom placeholder="Masukkan Tipe Acara" />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/event/type-of-event.tsx

@@ -0,0 +1,104 @@
+import {
+  ActionIcon,
+  BaseBox,
+  CenterCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { router } from "expo-router";
+import { View } from "react-native";
+import { Divider } from "react-native-paper";
+
+export default function AdminEventTypeOfEvent() {
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Event" />}>
+        <AdminComp_BoxTitle
+          title="Tipe Acara"
+          rightComponent={
+            <AdminActionIconPlus
+              onPress={() => {
+                router.push(`/admin/event/type-create`);
+              }}
+            />
+          }
+        />
+
+        <BaseBox>
+          <GridDetail_4_8
+            label={
+              <TextCustom bold align="center">
+                Aksi
+              </TextCustom>
+            }
+            value={<TextCustom bold>Tipe Acara</TextCustom>}
+          />
+          <Divider />
+          <Spacing />
+
+          <StackCustom>
+            {listData.map((item, index) => (
+              <View key={index}>
+                <GridDetail_4_8
+                  label={
+                    <CenterCustom>
+                      <ActionIcon
+                        icon={
+                          <IconEdit size={ICON_SIZE_BUTTON} color="black" />
+                        }
+                        onPress={() => {
+                          router.push(`/admin/event/type-update?id=${index}`);
+                        }}
+                      />
+                    </CenterCustom>
+                  }
+                  value={<TextCustom bold>{item.label}</TextCustom>}
+                />
+                <Divider />
+              </View>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Seminar",
+    value: "seminar",
+  },
+  {
+    label: "Workshop",
+    value: "workshop",
+  },
+  {
+    label: "Konferensi",
+    value: "konferensi",
+  },
+  {
+    label: "Lomba",
+    value: "lomba",
+  },
+  {
+    label: "Pameran",
+    value: "pameran",
+  },
+  {
+    label: "Pesta",
+    value: "pesta",
+  },
+  {
+    label: "Pertandingan",
+    value: "pertandingan",
+  },
+];

app/(application)/admin/event/type-update.tsx

@@ -0,0 +1,30 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useLocalSearchParams, useRouter } from "expo-router";
+
+export default function AdminEventTypeOfEventUpdate() {
+  const { id } = useLocalSearchParams();
+  console.log("id >", id);
+
+  const router = useRouter();
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Ubah Tipe Acara" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom placeholder="Masukkan Tipe Acara" value="" />
+      </ViewWrapper>
+    </>
+  );
+}