#style:

- UI Event
- Perbaiki create button ke beberapa app
## No Issuee

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

@@ -2,61 +2,67 @@
 
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
-import { Card, Stack, Grid, Title, Text, Center } from "@mantine/core";
+import {
+  Card,
+  Stack,
+  Grid,
+  Title,
+  Text,
+  Center,
+  Box,
+  Loader,
+} from "@mantine/core";
 import moment from "moment";
 
 import { MODEL_EVENT } from "../../model/interface";
 import { useRouter } from "next/navigation";
 import _ from "lodash";
+import { useState } from "react";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
+import ComponentEvent_BoxListStatus from "../../component/box_list_status";
+import { event_getAllDraft } from "../../fun/get/status/get_all_draft";
+import { ComponentEvent_CardRiwayat } from "../../component/card_view/card_riwayat";
+import { event_getListSemuaRiwayat } from "../../fun/get/riwayat/get_list_semua_riwayat";
 
-export default function Event_SemuaRiwayat({ data }: { data: MODEL_EVENT[] }) {
+export default function Event_SemuaRiwayat({
+  listData,
+}: {
+  listData: MODEL_EVENT[];
+}) {
   const router = useRouter();
-
-  if (_.isEmpty(data))
-    return (
-      <Center h={"80vh"}>
-        <Text fw={"bold"} fz={"sm"}>
-          Tidak Ada Event
-        </Text>
-      </Center>
-    );
+  const [data, setData] = useState(listData);
+  const [activePage, setActivePage] = useState(1);
 
   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>
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        // --- Main component --- //
+        <Box>
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await event_getListSemuaRiwayat({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
 
-              <Text fz={"sm"} lineClamp={2}>
-                {e.deskripsi}
-              </Text>
-            </Stack>
-          </Card.Section>
-        </Card>
-      ))}
+              return loadData;
+            }}
+          >
+            {(item) => <ComponentEvent_CardRiwayat data={item} />}
+          </ScrollOnly>
+        </Box>
+      )}
     </>
   );
 }