#style:

- UI Event - Perbaiki create button ke beberapa app ## No Issuee
2024-07-18 10:52:27 +08:00
parent 3ee32351e2
commit 38d4d04436
67 changed files with 1287 additions and 836 deletions
--- a/src/app_modules/event/component/box_list_status.tsx
+++ b/src/app_modules/event/component/box_list_status.tsx
@@ -7,6 +7,7 @@ import { MODEL_EVENT } from "../model/interface";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";

 export default function ComponentEvent_BoxListStatus({
  data,
@@ -22,11 +23,14 @@ export default function ComponentEvent_BoxListStatus({
  return (
    <>
      <Card
-        shadow="lg"
-        radius={"md"}
-        p={"md"}
-        withBorder
-        mb={"sm"}
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
        onClick={() => {
          setEventId(data?.id);
          setVisible(true);
@@ -34,18 +38,16 @@ export default function ComponentEvent_BoxListStatus({
        }}
      >
        <Stack>
-          <Grid>
-            <Grid.Col span={8}>
-              <Title order={6} truncate>
-                {data.title}
-              </Title>
-            </Grid.Col>
-            <Grid.Col span={4}>
-              <Text fz={"sm"} truncate>
-                {moment(data.tanggal).format("ll")}
-              </Text>
-            </Grid.Col>
-          </Grid>
+          <Group w={"100%"} position="apart">
+            <Title order={5} lineClamp={1} w={"70%"}>
+              {data.title}
+            </Title>
+            <Text align="right" fz={"sm"} lineClamp={1} w={"20%"}>
+              {new Intl.DateTimeFormat("id-ID", {
+                dateStyle: "medium",
+              }).format(data.tanggal)}
+            </Text>
+          </Group>

          <Text fz={"sm"} lineClamp={2}>
            {data.deskripsi}
--- a/src/app_modules/event/component/card_view/card_beranda.tsx
+++ b/src/app_modules/event/component/card_view/card_beranda.tsx
@@ -0,0 +1,69 @@
+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/loading_card";
+import { Card, Grid, Group, Stack, Text, Title } from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentEvent_CardBeranda({ data }: { data: any }) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  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",
+        }}
+      >
+        <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}
+          />
+        </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%"}>
+                {data.title}
+              </Title>
+              <Text align="right" fz={"sm"} lineClamp={1} w={"20%"}>
+                {new Intl.DateTimeFormat("id-ID", {
+                  dateStyle: "medium",
+                }).format(data.tanggal)}
+              </Text>
+            </Group>
+
+            <Text fz={"sm"} lineClamp={2}>
+              {data.deskripsi}
+            </Text>
+          </Stack>
+        </Card.Section>
+        {visible && data?.id === eventId ? (
+          <ComponentGlobal_CardLoadingOverlay />
+        ) : (
+          ""
+        )}
+      </Card>
+    </>
+  );
+}
--- a/src/app_modules/event/component/card_view/card_kontributor.tsx
+++ b/src/app_modules/event/component/card_view/card_kontributor.tsx
@@ -0,0 +1,78 @@
+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/loading_card";
+import { Avatar, Box, Card, Grid, Group, Stack, Text, Title } from "@mantine/core";
+import moment from "moment";
+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",
+          }}
+        >
+          <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>
+
+              {/* <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>
+      </>
+    );
+}
--- a/src/app_modules/event/component/card_view/card_riwayat.tsx
+++ b/src/app_modules/event/component/card_view/card_riwayat.tsx
@@ -0,0 +1,54 @@
+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 { Card, Stack, Grid, Title, Text, Group } from "@mantine/core";
+import moment from "moment";
+import router from "next/router";
+import { MODEL_EVENT } from "../../model/interface";
+
+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
+            profileId={data.Author?.Profile?.id}
+            imagesId={data.Author?.Profile?.imagesId}
+            authorName={data.Author?.Profile?.name}
+            isPembatas={true}
+          />
+        </Card.Section>
+        <Card.Section
+          p={"sm"}
+          onClick={() => router.push(RouterEvent.detail_riwayat + data.id)}
+        >
+          <Stack>
+            <Group w={"100%"} position="apart">
+              <Title order={5} lineClamp={1} w={"70%"}>
+                {data.title}
+              </Title>
+              <Text align="right" fz={"sm"} lineClamp={1} w={"20%"}>
+                {new Intl.DateTimeFormat("id-ID", {
+                  dateStyle: "medium",
+                }).format(data.tanggal)}
+              </Text>
+            </Group>
+
+            <Text fz={"sm"} lineClamp={2}>
+              {data.deskripsi}
+            </Text>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}
--- a/src/app_modules/event/component/detail/detail_data.tsx
+++ b/src/app_modules/event/component/detail/detail_data.tsx
@@ -3,6 +3,10 @@
 import { Stack, Title, Grid, Text, Paper, Spoiler } from "@mantine/core";
 import moment from "moment";
 import { MODEL_EVENT } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";

 export default function ComponentEvent_DetailData({
  data,
@@ -13,16 +17,25 @@ export default function ComponentEvent_DetailData({
  const hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });

  const jam = tgl.toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
+    timeStyle: "short",
+    hourCycle: "h24",
  });

  return (
    <>
      {/* <pre>{JSON.stringify(jam)}</pre> */}
-      <Paper withBorder p={"md"} shadow="lg">
-        <Stack px={"sm"}>
-          <Title w={"100%"} order={4}>{data ? data?.title : null}</Title>
+      <Paper
+        p={"md"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+        }}
+      >
+        <Stack px={"sm"} spacing={"lg"}>
+          <Title lineClamp={2} align="center" w={"100%"} order={4}>
+            {data ? data?.title : null}
+          </Title>
          <Grid>
            <Grid.Col span={4}>
              <Text fw={"bold"} fz={"sm"}>
@@ -67,13 +80,7 @@ export default function ComponentEvent_DetailData({
            <Text fw={"bold"} fz={"sm"}>
              Deskripsi
            </Text>
-            <Spoiler
-              hideLabel="Lihat sedikit"
-              maxHeight={50}
-              showLabel="Lihat banyak"
-            >
-              {data ? data?.deskripsi : null}
-            </Spoiler>
+            <Text>{data ? data?.deskripsi : null}</Text>
          </Stack>
        </Stack>
      </Paper>
--- a/src/app_modules/event/component/detail/detail_main.tsx
+++ b/src/app_modules/event/component/detail/detail_main.tsx
@@ -4,6 +4,7 @@ import { Stack, Title, Grid, Text, Paper, Spoiler } from "@mantine/core";
 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";

 export default function ComponentEvent_DetailMainData({
  data,
@@ -13,14 +14,21 @@ export default function ComponentEvent_DetailMainData({
  const tgl = data.tanggal;
  const hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });

-  const jam = tgl.toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
+ const jam = tgl.toLocaleTimeString([], {
+   timeStyle: "short",
+   hourCycle: "h24",
+ });

  return (
    <>
-      <Paper withBorder p={"md"} shadow="lg">
+      <Paper
+        p={"md"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+        }}
+      >
        <Stack>
          <ComponentGlobal_AuthorNameOnHeader
            authorName={data.Author.Profile.name}
@@ -28,7 +36,7 @@ export default function ComponentEvent_DetailMainData({
            profileId={data.Author.Profile.id}
          />
          <Stack px={"sm"}>
-            <Title order={4}>{data ? data.title : null}</Title>
+            <Title align="center" order={4}>{data ? data.title : null}</Title>
            <Grid>
              <Grid.Col span={4}>
                <Text fw={"bold"} fz={"sm"}>
@@ -73,13 +81,7 @@ export default function ComponentEvent_DetailMainData({
              <Text fw={"bold"} fz={"sm"}>
                Deskripsi
              </Text>
-              <Spoiler
-                hideLabel="Lihat sedikit"
-                maxHeight={50}
-                showLabel="Lihat banyak"
-              >
-                {data ? data.deskripsi : null}
-              </Spoiler>
+              <Text>{data ? data?.deskripsi : null}</Text>
            </Stack>
          </Stack>
        </Stack>
--- a/src/app_modules/event/component/detail/list_peserta.tsx
+++ b/src/app_modules/event/component/detail/list_peserta.tsx
@@ -16,6 +16,7 @@ import _ from "lodash";
 import peserta from "../../main/kontribusi/peserta";
 import { MODEL_EVENT_PESERTA } from "../../model/interface";
 import { useRouter } from "next/navigation";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";

 export default function ComponentEvent_ListPeserta({
  listPeserta,
@@ -24,10 +25,18 @@ export default function ComponentEvent_ListPeserta({
  listPeserta: MODEL_EVENT_PESERTA[];
  total: number;
 }) {
-  const router = useRouter()
+  const router = useRouter();
  return (
    <>
-      <Paper withBorder mt={"lg"}>
+      <Paper
+        mt={"lg"}
+        p={"md"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+        }}
+      >
        <Stack spacing={"md"} p={"md"}>
          <Center>
            <Title order={5}>Daftar Peserta ({total})</Title>