# Event Join

## feat
- Join event
- History semua event dan event saya
### No Issuue

src/app_modules/event/main/riwayat/index.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import { Card, Stack, Grid, Title, Text, Center, Tabs } from "@mantine/core";
+import moment from "moment";
+
+import { MODEL_EVENT } from "../../model/interface";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import Event_SemuaRiwayat from "./semua";
+import Event_RiwayatSaya from "./saya";
+import { useAtom } from "jotai";
+import { gs_event_riwayat } from "../../global_state";
+
+export default function Event_Riwayat({
+  dataSemuaRiwayat,
+  dataRiwayatSaya
+}: {
+  dataSemuaRiwayat: MODEL_EVENT[];
+  dataRiwayatSaya: MODEL_EVENT[]
+}) {
+  const router = useRouter();
+  const [tabsRiwayat, setTabsRiwayat] = useAtom(gs_event_riwayat)
+
+  const listTabs = [
+    {
+      id: 1,
+      label: "Semua Riwayat",
+      value: "Semua",
+      path: <Event_SemuaRiwayat data={dataSemuaRiwayat as any} />,
+    },
+    {
+      id: 2,
+      label: "Riwayat Saya",
+      value: "Saya",
+      path: <Event_RiwayatSaya data={dataRiwayatSaya as any}/>,
+    },
+  ];
+
+  return (
+    <>
+      <Tabs
+        defaultValue={"Semua"}
+        variant="pills"
+        radius={"xl"}
+        onTabChange={setTabsRiwayat}
+        value={tabsRiwayat}
+      >
+        <Stack>
+          <Tabs.List grow>
+            {listTabs.map((e) => (
+              <Tabs.Tab
+                key={e.id}
+                value={e.value}
+                bg={tabsRiwayat === e.value ? "blue" : "gray.1"}
+                fw={tabsRiwayat === e.value ? "bold" : "normal"}
+              >
+                {e.label}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+          {listTabs.map((e) => (
+            <Tabs.Panel key={e.id} value={e.value}>
+              {e.path}
+            </Tabs.Panel>
+          ))}
+        </Stack>
+      </Tabs>
+     
+    </>
+  );
+}

src/app_modules/event/main/riwayat/saya.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import { Card, Stack, Grid, Title, Text, Center } from "@mantine/core";
+import moment from "moment";
+import { MODEL_EVENT } from "../../model/interface";
+import { useRouter } from "next/navigation";
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import _ from "lodash";
+
+export default function Event_RiwayatSaya({ data }: { data: MODEL_EVENT[] }) {
+  const router = useRouter();
+
+  if (_.isEmpty(data))
+    return (
+      <Center h={"80vh"}>
+        <Text fw={"bold"} fz={"sm"}>
+          Tidak Ada Event
+        </Text>
+      </Center>
+    );
+
+  return (
+    <>
+      {data.map((e, i) => (
+        <Card key={e.id} shadow="lg" radius={"md"} withBorder mb={"sm"}>
+          <Card.Section px={"sm"} pt={"sm"}>
+            <ComponentGlobal_AuthorNameOnHeader
+              profileId={e.Author.Profile.id}
+              imagesId={e.Author.Profile.imagesId}
+              authorName={e.Author.Profile.name}
+            />
+          </Card.Section>
+          <Card.Section
+            p={"sm"}
+            onClick={() => router.push(RouterEvent.detail_riwayat + e.id)}
+          >
+            <Stack>
+              <Grid>
+                <Grid.Col span={8}>
+                  <Title order={6} truncate>
+                    {e.title}
+                  </Title>
+                </Grid.Col>
+                <Grid.Col span={4}>
+                  <Text fz={"sm"} truncate>
+                    {moment(e.tanggal).format("ll")}
+                  </Text>
+                </Grid.Col>
+              </Grid>
+
+              <Text fz={"sm"} lineClamp={2}>
+                {e.deskripsi}
+              </Text>
+            </Stack>
+          </Card.Section>
+        </Card>
+      ))}
+    </>
+  );
+}

src/app_modules/event/main/riwayat/semua.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import { Card, Stack, Grid, Title, Text, Center } from "@mantine/core";
+import moment from "moment";
+
+import { MODEL_EVENT } from "../../model/interface";
+import { useRouter } from "next/navigation";
+import _ from "lodash";
+
+export default function Event_SemuaRiwayat({ data }: { data: MODEL_EVENT[] }) {
+  const router = useRouter();
+
+  if (_.isEmpty(data))
+    return (
+      <Center h={"80vh"}>
+        <Text fw={"bold"} fz={"sm"}>
+          Tidak Ada Event
+        </Text>
+      </Center>
+    );
+
+  return (
+    <>
+      {data.map((e, i) => (
+        <Card key={e.id} shadow="lg" radius={"md"} withBorder mb={"sm"}>
+          <Card.Section px={"sm"} pt={"sm"}>
+            <ComponentGlobal_AuthorNameOnHeader
+              profileId={e.Author.Profile.id}
+              imagesId={e.Author.Profile.imagesId}
+              authorName={e.Author.Profile.name}
+            />
+          </Card.Section>
+          <Card.Section
+            p={"sm"}
+            onClick={() => router.push(RouterEvent.detail_riwayat + e.id)}
+          >
+            <Stack>
+              <Grid>
+                <Grid.Col span={8}>
+                  <Title order={6} truncate>
+                    {e.title}
+                  </Title>
+                </Grid.Col>
+                <Grid.Col span={4}>
+                  <Text fz={"sm"} truncate>
+                    {moment(e.tanggal).format("ll")}
+                  </Text>
+                </Grid.Col>
+              </Grid>
+
+              <Text fz={"sm"} lineClamp={2}>
+                {e.deskripsi}
+              </Text>
+            </Stack>
+          </Card.Section>
+        </Card>
+      ))}
+    </>
+  );
+}