# Event

## feat
- Tampilan detail status
- Tampilan detail main
- Tampilan detail kontribusi
- Tampilan edit
### No issue

src/app_modules/event/component/detail_data.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Stack, Title, Grid, Text, Paper } from "@mantine/core";
+import moment from "moment";
+
+export default function ComponentEvent_DetailData() {
+  return (
+    <>
+      <Paper withBorder p={"md"} shadow="lg">
+        <Stack px={"sm"}>
+          <Title order={4}>Nama Event</Title>
+          <Grid>
+            <Grid.Col span={3}>
+              <Text fw={"bold"}>Lokasi</Text>
+            </Grid.Col>
+            <Grid.Col span={1}>:</Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>Lokasi Acara</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={3}>
+              <Text fw={"bold"}>Tanggal</Text>
+            </Grid.Col>
+            <Grid.Col span={1}>:</Grid.Col>
+            <Grid.Col span={"auto"}>{moment(Date.now()).format("ll")}</Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={3}>
+              <Text fw={"bold"}>Jam</Text>
+            </Grid.Col>
+            <Grid.Col span={1}>:</Grid.Col>
+            <Grid.Col span={"auto"}>{moment(Date.now()).format("LT")}</Grid.Col>
+          </Grid>
+          <Stack spacing={2}>
+            <Text fw={"bold"}>Deskripsi</Text>
+            <Text>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
+              ipsum voluptate doloremque optio explicabo temporibus delectus
+              voluptatum similique tempora voluptatem. Exercitationem veritatis
+              tempora impedit ipsam, fugit vitae repellat sint fugiat
+            </Text>
+          </Stack>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/event/component/header_tamplate.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
+import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentEvent_HeaderTamplate({
+  hideBack,
+  changeIconBack,
+  route,
+  route2,
+  title,
+  icon,
+  bg,
+}: {
+  hideBack?: boolean;
+  changeIconBack?: any
+  route?: any;
+  route2?: any;
+  title: string;
+  icon?: any;
+  bg?: any;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Header
+        height={50}
+        sx={{ borderStyle: "none" }}
+        bg={bg === null ? "" : bg}
+      >
+        <Group h={50} position="apart" px={"md"}>
+          {hideBack ? (
+            <ActionIcon variant="transparent" disabled></ActionIcon>
+          ) : (
+            <ActionIcon
+              variant="transparent"
+              onClick={() => {
+                if (route === null || route === undefined) {
+                  return router.back();
+                } else {
+                  return router.push(route);
+                }
+              }}
+            >
+             {changeIconBack ? changeIconBack:  <IconChevronLeft />}
+            </ActionIcon>
+          )}
+          <Title order={5}>{title}</Title>
+          {(() => {
+            if (route2 === null || route2 === undefined) {
+              return <ActionIcon disabled variant="transparent"></ActionIcon>;
+            } else {
+              return (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => router.push(route2)}
+                >
+                  {icon}
+                </ActionIcon>
+              );
+            }
+          })()}
+        </Group>
+      </Header>
+    </>
+  );
+}