Fix: User search & Event

Deskripsi:
- Tampilan avatar dan username
## NO Issue

src/app_modules/event/component/box_list_status.tsx

@@ -1,7 +1,10 @@
 "use client";
 
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
 import { Card, Group, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -20,27 +23,20 @@ export default function ComponentEvent_BoxListStatus({
 
   return (
     <>
-      <Card
-        style={{
-          padding: "15px",
-          backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
-          border: `2px solid ${AccentColor.blue}`,
-          color: "white",
-          marginBottom: "15px",
-        }}
-        onClick={() => {
+      <ComponentGlobal_CardStyles
+        marginBottom={"15px"}
+        onClickHandler={() => {
           setEventId(data?.id);
           setVisible(true);
           router.push(path + data.id);
         }}
       >
         <Stack>
-          <Group w={"100%"} position="apart">
-            <Title order={5} lineClamp={1} w={"70%"}>
+          <Group w={"100%"} position="apart" grow>
+            <Title order={5} lineClamp={1}>
               {data.title}
             </Title>
-            <Text align="right" fz={"sm"} lineClamp={1} w={"20%"}>
+            <Text align="right" fz={"sm"} lineClamp={1}>
               {new Intl.DateTimeFormat("id-ID", {
                 dateStyle: "medium",
               }).format(data.tanggal)}
@@ -56,7 +52,7 @@ export default function ComponentEvent_BoxListStatus({
         ) : (
           ""
         )}
-      </Card>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/event/component/card_view/card_beranda.tsx

@@ -1,8 +1,10 @@
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
-import { Card, Group, Stack, Text, Title } from "@mantine/core";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import { Box, Group, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
@@ -13,38 +15,26 @@ export function ComponentEvent_CardBeranda({ data }: { data: any }) {
 
   return (
     <>
-      <Card
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          color: "white",
-          borderRadius: "10px",
-          marginBottom: "20px",
-          padding: "15px",
-        }}
-      >
-        <Card.Section px={"sm"} pt={"sm"}>
-          <ComponentGlobal_AuthorNameOnHeader
-            profileId={data.Author?.Profile?.id}
-            imagesId={data.Author?.Profile?.imagesId}
-            authorName={data.Author?.Profile?.name}
-            isPembatas={true}
+      <ComponentGlobal_CardStyles marginBottom={"15px"}>
+        <Stack>
+          <ComponentGlobal_AvatarAndUsername
+            profile={data?.Author?.Profile as any}
           />
-        </Card.Section>
-        <Card.Section
-          p={"sm"}
-          onClick={() => {
-            setEventId(data?.id);
-            setVisible(true);
-            router.push(RouterEvent.detail_main + data?.id);
-          }}
-        >
-          <Stack>
-            <Group w={"100%"} position="apart">
-              <Title order={5} lineClamp={1} w={"70%"}>
+
+          <Stack
+            spacing={5}
+            // p={"md"}
+            onClick={() => {
+              setEventId(data?.id);
+              setVisible(true);
+              router.push(RouterEvent.detail_main + data?.id);
+            }}
+          >
+            <Group w={"100%"} position="apart" grow>
+              <Title order={5} lineClamp={1}>
                 {data.title}
               </Title>
-              <Text align="right" fz={"sm"} lineClamp={1} w={"20%"}>
+              <Text align="right" fz={"sm"} lineClamp={1}>
                 {new Intl.DateTimeFormat("id-ID", {
                   dateStyle: "medium",
                 }).format(data.tanggal)}
@@ -55,13 +45,12 @@ export function ComponentEvent_CardBeranda({ data }: { data: any }) {
               {data.deskripsi}
             </Text>
           </Stack>
-        </Card.Section>
-        {visible && data?.id === eventId ? (
-          <ComponentGlobal_CardLoadingOverlay />
-        ) : (
-          ""
-        )}
-      </Card>
+
+          {visible && data?.id === eventId && (
+            <ComponentGlobal_CardLoadingOverlay />
+          )}
+        </Stack>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/event/component/card_view/card_kontributor.tsx

@@ -1,78 +1,96 @@
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
-import { Avatar, Box, Card, Grid, Group, Stack, Text, Title } from "@mantine/core";
-import moment from "moment";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoaderAvatar,
+} from "@/app_modules/_global/component";
+import {
+  Box,
+  Card,
+  Group,
+  Stack,
+  Title
+} from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_EVENT_PESERTA } from "../../model/interface";
 
-export function ComponentEvent_CardKontributor({data}: {data: MODEL_EVENT_PESERTA}) {
-    const router = useRouter();
-    const [eventId, setEventId] = useState("");
-    const [visible, setVisible] = useState(false);
-    
-    return (
-      <>
-        <Card
-          style={{
-            border: `2px solid ${AccentColor.blue}`,
-            backgroundColor: AccentColor.darkblue,
-            color: "white",
-            borderRadius: "10px",
-            marginBottom: "20px",
-            padding: "15px",
+export function ComponentEvent_CardKontributor({
+  data,
+}: {
+  data: MODEL_EVENT_PESERTA;
+}) {
+  const router = useRouter();
+  const [eventId, setEventId] = useState("");
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <ComponentGlobal_CardStyles marginBottom={"16px"}>
+        <Card.Section px={"md"} pt={"sm"}>
+          <ComponentGlobal_AvatarAndUsername
+            profile={data?.Event.Author.Profile as any}
+          />
+          {/* <ComponentGlobal_AuthorNameOnHeader
+            profileId={data?.Event.Author.Profile.id}
+            imagesId={data?.Event.Author.Profile.imagesId}
+            authorName={data?.Event.Author.Profile.name}
+            isPembatas
+          /> */}
+        </Card.Section>
+        <Card.Section
+          p={"sm"}
+          pt={"lg"}
+          onClick={() => {
+            setEventId(data?.id), setVisible(true);
+            router.push(RouterEvent.detail_kontribusi + data.Event.id);
           }}
         >
-          <Card.Section px={"sm"} pt={"sm"}>
-            <ComponentGlobal_AuthorNameOnHeader
-              profileId={data?.Event.Author.Profile.id}
-              imagesId={data?.Event.Author.Profile.imagesId}
-              authorName={data?.Event.Author.Profile.name}
-              isPembatas
-            />
-          </Card.Section>
-          <Card.Section
-            p={"sm"}
-            onClick={() => {
-              setEventId(data?.id), setVisible(true);
-              router.push(RouterEvent.detail_kontribusi + data.Event.id);
-            }}
-          >
-            <Stack>
-              <Title align="center" order={5} lineClamp={1}>
-                {data?.Event.title}
-              </Title>
+          <Stack>
+            <Title align="center" order={4} lineClamp={1}>
+              {data?.Event.title}
+            </Title>
 
-              {/* <Text fz={"sm"} lineClamp={2}>
-                {data?.Event.deskripsi}
-              </Text> */}
-
-              <Group position="center">
-                {data?.Event.Event_Peserta.map((val, i) => (
-                  <Box key={i}>
-                    <Avatar
-                      size={"lg"}
-                      radius={"xl"}
-                      sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
-                      src={
-                        RouterProfile.api_foto_profile +
-                        val?.User?.Profile.imagesId
-                      }
-                    />
-                  </Box>
-                ))}
-              </Group>
-            </Stack>
-          </Card.Section>
-          {visible && eventId === data?.id ? (
-            <ComponentGlobal_CardLoadingOverlay />
-          ) : (
-            ""
-          )}
-        </Card>
-      </>
-    );
-}
+            <Group position="center">
+              {data?.Event.Event_Peserta.map((e, i) => (
+                <Box key={i}>
+                  <ComponentGlobal_LoaderAvatar
+                    fileId={e.User.Profile.imageId as any}
+                    sizeAvatar={60}
+                  />
+                  {/* <Avatar
+                    size={"lg"}
+                    radius={"xl"}
+                    sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                    src={
+                      RouterProfile.api_foto_profile +
+                      val?.User?.Profile.imagesId
+                    }
+                  /> */}
+                </Box>
+              ))}
+            </Group>
+          </Stack>
+        </Card.Section>
+        {visible && eventId === data?.id ? (
+          <ComponentGlobal_CardLoadingOverlay />
+        ) : (
+          ""
+        )}
+      </ComponentGlobal_CardStyles>
+      {/* <Card
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+          borderRadius: "10px",
+          marginBottom: "20px",
+          padding: "15px",
+        }}
+      >
+       
+      </Card> */}
+    </>
+  );
+}

src/app_modules/event/component/card_view/card_riwayat.tsx

@@ -3,7 +3,11 @@ import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_nam
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { Card, Group, Stack, Text, Title } from "@mantine/core";
 
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_EVENT } from "../../model/interface";
@@ -15,38 +19,32 @@ export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
 
   return (
     <>
-      <Card
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          color: "white",
-          borderRadius: "10px",
-          marginBottom: "20px",
-          padding: "15px",
-        }}
-      >
-        <Card.Section px={"sm"} pt={"sm"}>
-          <ComponentGlobal_AuthorNameOnHeader
+      <ComponentGlobal_CardStyles marginBottom={"15px"}>
+        <Stack>
+          {/* <ComponentGlobal_AuthorNameOnHeader
             profileId={data.Author?.Profile?.id}
             imagesId={data.Author?.Profile?.imagesId}
             authorName={data.Author?.Profile?.name}
             isPembatas={true}
+          /> */}
+
+          <ComponentGlobal_AvatarAndUsername
+            profile={data.Author?.Profile as any}
           />
-        </Card.Section>
-        <Card.Section
-          p={"sm"}
-          onClick={() => {
-            setVisible(true);
-            setEventId(data?.id);
-            router.push(RouterEvent.detail_riwayat + data.id);
-          }}
-        >
-          <Stack>
-            <Group w={"100%"} position="apart">
-              <Title order={5} lineClamp={1} w={"70%"}>
+
+          <Stack
+            spacing={5}
+            onClick={() => {
+              setVisible(true);
+              setEventId(data?.id);
+              router.push(RouterEvent.detail_riwayat + data.id);
+            }}
+          >
+            <Group w={"100%"} position="apart" grow>
+              <Title order={5} lineClamp={1}>
                 {data.title}
               </Title>
-              <Text align="right" fz={"sm"} lineClamp={1} w={"20%"}>
+              <Text align="right" fz={"sm"} lineClamp={1}>
                 {new Intl.DateTimeFormat("id-ID", {
                   dateStyle: "medium",
                 }).format(data.tanggal)}
@@ -57,13 +55,14 @@ export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
               {data.deskripsi}
             </Text>
           </Stack>
-        </Card.Section>
-        {visible && eventId !== "" ? (
-          <ComponentGlobal_CardLoadingOverlay />
-        ) : (
-          ""
-        )}
-      </Card>
+
+          {visible && eventId !== "" ? (
+            <ComponentGlobal_CardLoadingOverlay />
+          ) : (
+            ""
+          )}
+        </Stack>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/event/component/detail/detail_data.tsx

@@ -1,12 +1,8 @@
 "use client";
 
-import { Stack, Title, Grid, Text, Paper, Spoiler } from "@mantine/core";
-import moment from "moment";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Grid, Stack, Text, Title } from "@mantine/core";
 import { MODEL_EVENT } from "../../model/interface";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentEvent_DetailData({
   data,
@@ -23,15 +19,7 @@ export default function ComponentEvent_DetailData({
 
   return (
     <>
-      {/* <pre>{JSON.stringify(jam)}</pre> */}
-      <Paper
-        p={"md"}
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          color: "white",
-        }}
-      >
+      <ComponentGlobal_CardStyles marginBottom={"16px"}>
         <Stack px={"sm"} spacing={"lg"}>
           <Title lineClamp={2} align="center" w={"100%"} order={4}>
             {data ? data?.title : null}
@@ -83,7 +71,7 @@ export default function ComponentEvent_DetailData({
             <Text>{data ? data?.deskripsi : null}</Text>
           </Stack>
         </Stack>
-      </Paper>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/event/component/detail/detail_main.tsx

@@ -5,6 +5,10 @@ import moment from "moment";
 import { MODEL_EVENT } from "../../model/interface";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
 
 export default function ComponentEvent_DetailMainData({
   data,
@@ -14,29 +18,23 @@ export default function ComponentEvent_DetailMainData({
   const tgl = data.tanggal;
   const hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });
 
- const jam = tgl.toLocaleTimeString([], {
-   timeStyle: "short",
-   hourCycle: "h24",
- });
+  const jam = tgl.toLocaleTimeString([], {
+    timeStyle: "short",
+    hourCycle: "h24",
+  });
 
   return (
     <>
-      <Paper
-        p={"md"}
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          color: "white",
-        }}
-      >
-        <Stack>
-          <ComponentGlobal_AuthorNameOnHeader
-            authorName={data.Author.Profile.name}
-            imagesId={data.Author.Profile.imagesId}
-            profileId={data.Author.Profile.id}
+      <ComponentGlobal_CardStyles>
+        <Stack px={"xs"} spacing={"xl"}>
+          <ComponentGlobal_AvatarAndUsername
+            profile={data?.Author?.Profile as any}
           />
-          <Stack px={"sm"}>
-            <Title align="center" order={4}>{data ? data.title : null}</Title>
+
+          <Stack>
+            <Title align="center" order={4}>
+              {data ? data.title : null}
+            </Title>
             <Grid>
               <Grid.Col span={4}>
                 <Text fw={"bold"} fz={"sm"}>
@@ -85,7 +83,7 @@ export default function ComponentEvent_DetailMainData({
             </Stack>
           </Stack>
         </Stack>
-      </Paper>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/event/component/detail/list_peserta.tsx

@@ -1,22 +1,19 @@
 "use client";
 
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import {
-  Paper,
-  Stack,
   Center,
-  Title,
-  Grid,
-  Avatar,
-  Divider,
+  Stack,
   Text,
+  Title
 } from "@mantine/core";
 import _ from "lodash";
 
-import peserta from "../../main/kontribusi/peserta";
-import { MODEL_EVENT_PESERTA } from "../../model/interface";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
 import { useRouter } from "next/navigation";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { MODEL_EVENT_PESERTA } from "../../model/interface";
 
 export default function ComponentEvent_ListPeserta({
   listPeserta,
@@ -28,16 +25,8 @@ export default function ComponentEvent_ListPeserta({
   const router = useRouter();
   return (
     <>
-      <Paper
-        mt={"lg"}
-        p={"md"}
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          color: "white",
-        }}
-      >
-        <Stack spacing={"md"} p={"md"}>
+      <ComponentGlobal_CardStyles>
+        <Stack spacing={"md"} px={"sm"}>
           <Center>
             <Title order={5}>Daftar Peserta ({total})</Title>
           </Center>
@@ -52,37 +41,18 @@ export default function ComponentEvent_ListPeserta({
             <Stack>
               {listPeserta.map((e, i) => (
                 <Stack key={i} spacing={"sm"}>
-                  <Grid>
-                    <Grid.Col
-                      span={"content"}
-                      onClick={() => {
-                        router.push(RouterProfile.katalog + e.User.Profile.id);
-                      }}
-                    >
-                      <Avatar
-                        sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
-                        radius={"xl"}
-                        bg={"gray"}
-                        size={30}
-                        src={
-                          RouterProfile.api_foto_profile +
-                          e.User.Profile.imagesId
-                        }
-                      />
-                    </Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Stack justify="center" h={"100%"}>
-                        <Text>{e.User.Profile.name}</Text>
-                      </Stack>
-                    </Grid.Col>
-                  </Grid>
-                  <Divider />
+                  <ComponentGlobal_AvatarAndUsername
+                    profile={e.User.Profile as any}
+                    sizeAvatar={30}
+                    fontSize={"sm"}
+                  />
+                  {/* <Divider /> */}
                 </Stack>
               ))}
             </Stack>
           )}
         </Stack>
-      </Paper>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }