fix event

deskripsi:
- mengubah tampilan text biasa ke html view
- menambahkan text editor pada create & edit

src/app_modules/_global/color/color_pallet.ts

@@ -1,7 +1,7 @@
 export const MainColor = {
   black: "#202020",
   darkblue: "#001D3D",
-  soft_darkblue: "#17406E",
+  soft_darkblue: "#0e3763",
   yellow: "#E1B525",
   white: "#D4D0D0",
   red: "#FF4B4C",

src/app_modules/_global/component/box_information.tsx

@@ -1,6 +1,7 @@
-import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { Grid, Stack, Text } from "@mantine/core";
-import { AccentColor, MainColor } from "../color/color_pallet";
 import { IconInfoCircle } from "@tabler/icons-react";
+import { MainColor } from "../color/color_pallet";
+import { ComponentGlobal_CardStyles } from "./comp_card_box_and_background";
 
 export default function ComponentGlobal_BoxInformation({
   informasi,
@@ -13,15 +14,7 @@ export default function ComponentGlobal_BoxInformation({
 }) {
   return (
     <>
-      <Paper
+      <ComponentGlobal_CardStyles>
-        bg={"blue.3"}
-        p={10}
-        style={{
-          backgroundColor: AccentColor.blue,
-          border: `2px solid ${AccentColor.softblue}`,
-          borderRadius: "10px",
-        }}
-      >
         {isReport ? (
           <Stack spacing={0}>
             <Text
@@ -54,7 +47,7 @@ export default function ComponentGlobal_BoxInformation({
             </Grid.Col>
           </Grid>
         )}
-      </Paper>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/_global/component/new/comp_V3_grid_detail_data.tsx

@@ -0,0 +1,29 @@
+import { MainColor } from "@/app_modules/_global/color";
+import { Grid, Paper, Text } from "@mantine/core";
+
+export function Component_V3_GridDetailData({
+  item,
+}: {
+  item: Record<string, any>;
+}) {
+  return (
+    <>
+      <Paper
+        bg={MainColor.soft_darkblue}
+        style={{
+          color: MainColor.white,
+        }}
+      >
+        <Grid m={0}>
+          <Grid.Col lg={3} md={3} sm={3} xs={3} span={4}>
+            <Text fw={"bold"}>{item.title || item.label}</Text>
+          </Grid.Col>
+
+          <Grid.Col span={"auto"}>
+            <Text>{item.value}</Text>
+          </Grid.Col>
+        </Grid>
+      </Paper>
+    </>
+  );
+}

src/app_modules/_global/component/new/comp_V3_moment_date_and_time.tsx

@@ -0,0 +1,26 @@
+import { Text } from "@mantine/core";
+import moment from "moment";
+import "moment/locale/id";
+import { MainColor } from "../../color/color_pallet";
+
+export const Component_V3_MomentDateAndTime = ({
+  dateTime,
+  color,
+}: {
+  dateTime: Date | string | undefined
+  color?: string;
+}) => {
+  return (
+    <>
+      <Text c={color ?? MainColor.white}>
+        {dateTime
+          ? moment(
+              dateTime.toLocaleString("id-ID", {
+                dateStyle: "full",
+              })
+            ).format("dddd, DD MMMM YYYY, LT")
+          : "-"}
+      </Text>
+    </>
+  );
+};

src/app_modules/_global/component/new/comp_V3_text_editor.tsx

@@ -12,13 +12,9 @@ const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
 export function Component_V3_TextEditor({
   data,
   onSetData,
-//   lengthData,
-  onSetLengthData,
 }: {
   data: string;
   onSetData: (value: string) => void;
-//   lengthData: number;
-  onSetLengthData: (value: number) => void;
 }) {
   const [isReady, setIsReady] = useState<boolean>(false);
 
@@ -31,14 +27,13 @@ export function Component_V3_TextEditor({
     // if (text.length <= maxInputLength) {
     // }
     onSetData(input);
-    onSetLengthData(text.length);
     // Input diabaikan jika panjang > maxLength
   };
 
   return (
     <>
       {isReady ? (
-        <Paper p="sm" withBorder shadow="lg" mah={300} bg={MainColor.white} >
+        <Paper p={5} withBorder shadow="lg" mah={300} bg={MainColor.white} >
           <ScrollArea h={280}>
             <ReactQuill
               placeholder="Apa yang sedang ingin dibahas ?"

src/app_modules/_global/component/new/comp_set_inner_html.tsx

@@ -1,6 +1,4 @@
-import React from "react";
 import { MainColor } from "../../color";
-import { useShallowEffect } from "@mantine/hooks";
 
 export function Comp_DangerouslySetInnerHTML({
   props,
@@ -9,23 +7,6 @@ export function Comp_DangerouslySetInnerHTML({
   props: string;
   color?: string;
 }) {
-  // useShallowEffect(() => {
-  //   // Add custom style for stickers inside Quill editor
-  //   const style = document.createElement("style");
-  //   style.textContent = `
-  //     .chat-content img {
-  //     max-width: 100px !important;
-  //     max-height: 100px !important;
-  //   }
-  // `;
-  //   document.head.appendChild(style);
-
-  //   return () => {
-  //     // Clean up when component unmounts
-  //     document.head.removeChild(style);
-  //   };
-  // }, []);
-
   return (
     <>
       <div

src/app_modules/_global/lib/stiker/react_quill_format_for_stiker.ts

@@ -8,7 +8,7 @@ export {
 
 const modulesReactQuill = {
   toolbar: [
-    [{ header: [1, 2, false] }],
+    [{ header: [1, 2, 3, 4, 5, 6, false] }],
     ["bold", "italic", "underline", "strike", "blockquote"],
     [{ list: "ordered" }, { list: "bullet" }],
     ["link"],

src/app_modules/admin/_components_v3/comp_detail_data.tsx

@@ -1,5 +1,5 @@
 import { MainColor } from "@/app_modules/_global/color";
-import { Grid, Text } from "@mantine/core";
+import { Grid, Paper, Text } from "@mantine/core";
 
 export function Admin_V3_ComponentDetail({
   item,
@@ -8,17 +8,22 @@ export function Admin_V3_ComponentDetail({
 }) {
   return (
     <>
-      <Grid m={0} bg={MainColor.soft_darkblue}>
+      <Paper
-        <Grid.Col lg={3} md={3} sm={3} xs={3} span={4}>
+        bg={MainColor.soft_darkblue}
-          <Text fw={"bold"}>{item.title || item.label}</Text>
+        style={{
-        </Grid.Col>
+          color: MainColor.white,
+        }}
+      >
+        <Grid m={0}>
+          <Grid.Col lg={3} md={3} sm={3} xs={3} span={4}>
+            <Text fw={"bold"}>{item.title || item.label}</Text>
+          </Grid.Col>
 
-        <Grid.Col span={"auto"}>
+          <Grid.Col span={"auto"}>
-          <Text>
+            <Text>{item.value}</Text>
-            {item.value}
+          </Grid.Col>
-          </Text>
+        </Grid>
-        </Grid.Col>
+      </Paper>
-      </Grid>
     </>
   );
 }

src/app_modules/event/component/box_list_status.tsx

@@ -1,14 +1,15 @@
 "use client";
 
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_CardLoadingOverlay,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
-import { Card, Group, Stack, Text, Title } from "@mantine/core";
+import { Group, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_EVENT } from "../_lib/interface";
+import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
 
 export default function ComponentEvent_BoxListStatus({
   data,
@@ -44,7 +45,7 @@ export default function ComponentEvent_BoxListStatus({
           </Group>
 
           <Text c={MainColor.white} fz={"sm"} lineClamp={2}>
-            {data.deskripsi}
+            <Comp_DangerouslySetInnerHTML props={data.deskripsi} />
           </Text>
         </Stack>
         {visible && eventId !== "" ? (

src/app_modules/event/component/button/button_create_event.tsx

@@ -14,6 +14,8 @@ import { WibuRealtime } from "wibu-pkg";
 import { Event_funCreate } from "../../fun/create/fun_create";
 import { gs_event_hotMenu } from "../../global_state";
 import { clientLogger } from "@/util/clientLogger";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
 
 export default function Event_ComponentCreateButton({
   value,
@@ -82,14 +84,16 @@ export default function Event_ComponentCreateButton({
         disabled={
           value.title === "" ||
           value.lokasi === "" ||
-          value.deskripsi === "" ||
           value.eventMaster_TipeAcaraId === 0 ||
           value.tanggal === "function Date() { [native code] }" ||
           // moment(value.tanggal).diff(moment(), "minutes") < 0
-          diffTimeEnd - 1 < diffTimeStart
+          diffTimeEnd - 1 < diffTimeStart ||
+          // value.deskripsi === "" ||
+          funReplaceHtml({ html: value.deskripsi }).length > maxInputLength ||
+          funReplaceHtml({ html: value.deskripsi }).length === 0
         }
         loaderPosition="center"
-        loading={isLoading ? true : false}
+        loading={isLoading}
         radius={"xl"}
         mt={"xl"}
         onClick={() => {

src/app_modules/event/component/button/comp_daftar_peserta_dan_sponsor.tsx

@@ -0,0 +1,14 @@
+import { Admin_V3_ComponentBreakpoint } from "@/app_modules/admin/_components_v3/comp_simple_grid_breakpoint";
+import Event_ComponentBoxDaftarPeserta from "../detail/comp_box_daftar_peserta";
+import Event_ComponentBoxDaftarSponsor from "../detail/comp_box_sponsor";
+
+export const Event_ComponentDaftarPesertaDanSponsor = () => {
+  return (
+    <>
+      <Admin_V3_ComponentBreakpoint>
+        <Event_ComponentBoxDaftarPeserta />
+        {/* <Event_ComponentBoxDaftarSponsor /> */}
+      </Admin_V3_ComponentBreakpoint>
+    </>
+  );
+};

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

@@ -8,6 +8,7 @@ import {
 import { Box, Group, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
 
 export function ComponentEvent_CardBeranda({ data }: { data: any }) {
   const router = useRouter();
@@ -43,7 +44,7 @@ export function ComponentEvent_CardBeranda({ data }: { data: any }) {
             </Group>
 
             <Text c={MainColor.white} fz={"sm"} lineClamp={2}>
-              {data.deskripsi}
+              <Comp_DangerouslySetInnerHTML props={data.deskripsi} />
             </Text>
           </Stack>
 

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

@@ -9,6 +9,7 @@ import {
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_EVENT } from "../../_lib/interface";
+import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
 
 export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
   const router = useRouter();
@@ -43,7 +44,7 @@ export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
             </Group>
 
             <Text fz={"sm"} lineClamp={2}>
-              {data.deskripsi}
+              <Comp_DangerouslySetInnerHTML props={data.deskripsi}/>
             </Text>
           </Stack>
 

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

@@ -5,12 +5,14 @@ import {
   ComponentGlobal_BoxInformation,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
-import { Grid, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
+import { Component_V3_GridDetailData } from "@/app_modules/_global/component/new/comp_V3_grid_detail_data";
+import { Component_V3_MomentDateAndTime } from "@/app_modules/_global/component/new/comp_V3_moment_date_and_time";
+import { SimpleGrid, Stack, Title } from "@mantine/core";
+import "moment/locale/id";
 import { MODEL_EVENT } from "../../_lib/interface";
 import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail";
 import Event_ComponentBoxDaftarPeserta from "./comp_box_daftar_peserta";
-import Event_ComponentBoxDaftarSponsor from "./comp_box_sponsor";
-
 export default function ComponentEvent_DetailData({
   isDaftarPeserta,
   isReport,
@@ -20,114 +22,61 @@ export default function ComponentEvent_DetailData({
   isReport?: boolean;
   data: MODEL_EVENT | null;
 }) {
+  const listData = [
+    {
+      title: "Lokasi",
+      value: data?.lokasi ?? "-",
+    },
+    {
+      title: "Tipe Acara",
+      value: `${data?.EventMaster_TipeAcara?.name}`,
+    },
+    {
+      title: "Tanggal Mulai ",
+      value: <Component_V3_MomentDateAndTime dateTime={data?.tanggal} />,
+    },
+    {
+      title: "Tanggal Selesai ",
+      value: <Component_V3_MomentDateAndTime dateTime={data?.tanggalSelesai} />,
+    },
+    {
+      title: "Deskripsi",
+      value: <Comp_DangerouslySetInnerHTML props={data?.deskripsi ?? ""} />,
+    },
+  ];
+
   return (
     <>
       {!data ? (
         <Event_ComponentSkeletonDetail />
       ) : (
         <Stack>
-          {isReport && (
+          {isReport && data.catatan  ? (
             <ComponentGlobal_BoxInformation
               isReport
               informasi={data?.catatan}
             />
+          ) : (
+            ""
           )}
 
           <ComponentGlobal_CardStyles marginBottom={"16px"}>
             <Stack>
-              <Stack px={"sm"} spacing={"xl"}>
+              <Stack spacing={"xl"}>
                 <Title
                   color={MainColor.white}
-                  lineClamp={2}
+                  // lineClamp={2}
                   align="center"
                   w={"100%"}
                   order={4}
                 >
                   {data ? data?.title : null}
                 </Title>
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={MainColor.white} fw={"bold"}>
-                      Lokasi
-                    </Text>
-                  </Grid.Col>
-                  <Grid.Col span={1}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Text c={MainColor.white}>
-                      {data ? data?.lokasi : null}
-                    </Text>
-                  </Grid.Col>
-                </Grid>
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={MainColor.white} fw={"bold"}>
-                      Tipe Acara
-                    </Text>
-                  </Grid.Col>
-                  <Grid.Col span={1}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Text c={MainColor.white}>
-                      {data ? data.EventMaster_TipeAcara?.name : null}
-                    </Text>
-                  </Grid.Col>
-                </Grid>
-                <Stack spacing={"xs"}>
-                  <Text c={MainColor.white} fw={"bold"}>
-                    Tanggal & Waktu
-                  </Text>
-                  <Grid>
-                    <Grid.Col span={4}>
-                      <Text c={MainColor.white} fw={"bold"}>
-                        Mulai
-                      </Text>
-                    </Grid.Col>
-                    <Grid.Col span={1}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Text c={MainColor.white}>
-                        {" "}
-                        {new Intl.DateTimeFormat("id-ID", {
-                          dateStyle: "full",
-                        }).format(new Date(data?.tanggal))}
-                        ,{" "}
-                        <Text span inherit c={MainColor.white}>
-                          {new Intl.DateTimeFormat("id-ID", {
-                            timeStyle: "short",
-                          }).format(new Date(data?.tanggal))}
-                        </Text>
-                      </Text>
-                    </Grid.Col>
-                  </Grid>
-                  <Grid>
-                    <Grid.Col span={4}>
-                      <Text c={MainColor.white} fw={"bold"}>
-                        Selesai
-                      </Text>
-                    </Grid.Col>
-                    <Grid.Col span={1}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Text c={MainColor.white}>
-                        {" "}
-                        {new Intl.DateTimeFormat("id-ID", {
-                          dateStyle: "full",
-                        }).format(new Date(data?.tanggalSelesai))}
-                        ,{" "}
-                        <Text span inherit c={MainColor.white}>
-                          {new Intl.DateTimeFormat("id-ID", {
-                            timeStyle: "short",
-                          }).format(new Date(data?.tanggalSelesai))}
-                        </Text>
-                      </Text>
-                    </Grid.Col>
-                  </Grid>
-                </Stack>
 
-                <Stack spacing={2}>
+                <Stack>
-                  <Text c={MainColor.white} fw={"bold"}>
+                  {listData.map((e, i) => (
-                    Deskripsi
+                    <Component_V3_GridDetailData item={e} key={i} />
-                  </Text>
+                  ))}
-                  <Text c={MainColor.white}>
-                    {data ? data?.deskripsi : null}
-                  </Text>
                 </Stack>
               </Stack>
 
@@ -140,7 +89,7 @@ export default function ComponentEvent_DetailData({
                   ]}
                 >
                   <Event_ComponentBoxDaftarPeserta />
-                  <Event_ComponentBoxDaftarSponsor />
+                  {/* <Event_ComponentBoxDaftarSponsor /> */}
                 </SimpleGrid>
               )}
             </Stack>

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

@@ -5,18 +5,19 @@ import {
   ComponentGlobal_AvatarAndUsername,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
+import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
+import { Component_V3_GridDetailData } from "@/app_modules/_global/component/new/comp_V3_grid_detail_data";
+import { Component_V3_MomentDateAndTime } from "@/app_modules/_global/component/new/comp_V3_moment_date_and_time";
 import { clientLogger } from "@/util/clientLogger";
-import { Grid, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import { Stack, Title } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import moment from "moment";
 import "moment/locale/id";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import { apiGetEventDetailById } from "../../_lib/api_event";
 import { MODEL_EVENT } from "../../_lib/interface";
+import { Event_ComponentDaftarPesertaDanSponsor } from "../button/comp_daftar_peserta_dan_sponsor";
 import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail";
-import Event_ComponentBoxDaftarPeserta from "./comp_box_daftar_peserta";
-import Event_ComponentBoxDaftarSponsor from "./comp_box_sponsor";
 
 export default function ComponentEvent_DetailMainData() {
   const params = useParams<{ id: string }>();
@@ -41,13 +42,36 @@ export default function ComponentEvent_DetailMainData() {
     }
   }
 
+  const listData = [
+    {
+      title: "Lokasi",
+      value: data?.lokasi ?? "-",
+    },
+    {
+      title: "Tipe Acara",
+      value: `${data?.EventMaster_TipeAcara?.name}`,
+    },
+    {
+      title: "Tanggal Mulai ",
+      value: <Component_V3_MomentDateAndTime dateTime={data?.tanggal} />,
+    },
+    {
+      title: "Tanggal Selesai ",
+      value: <Component_V3_MomentDateAndTime dateTime={data?.tanggalSelesai} />,
+    },
+    {
+      title: "Deskripsi",
+      value: <Comp_DangerouslySetInnerHTML props={data?.deskripsi ?? ""} />,
+    },
+  ];
+
   return (
     <>
       {data == null ? (
         <Event_ComponentSkeletonDetail />
       ) : (
         <ComponentGlobal_CardStyles>
-          <Stack px={"xs"} spacing={"xl"}>
+          <Stack  spacing={"xl"}>
             <ComponentGlobal_AvatarAndUsername
               profile={data?.Author?.Profile as any}
             />
@@ -56,87 +80,12 @@ export default function ComponentEvent_DetailMainData() {
               <Title color={MainColor.white} align="center" order={4}>
                 {data ? data.title : null}
               </Title>
-              <Grid>
+              <Stack>
-                <Grid.Col span={4}>
+                {listData.map((e, i) => (
-                  <Text c={MainColor.white} fw={"bold"}>
+                  <Component_V3_GridDetailData item={e} key={i} />
-                    Lokasi
+                ))}
-                  </Text>
-                </Grid.Col>
-                <Grid.Col span={1}>:</Grid.Col>
-                <Grid.Col span={"auto"}>
-                  <Text c={MainColor.white}>{data ? data.lokasi : null}</Text>
-                </Grid.Col>
-              </Grid>
-              <Grid>
-                <Grid.Col span={4}>
-                  <Text c={MainColor.white} fw={"bold"}>
-                    Tipe Acara
-                  </Text>
-                </Grid.Col>
-                <Grid.Col span={1}>:</Grid.Col>
-                <Grid.Col span={"auto"}>
-                  <Text c={MainColor.white}>
-                    {data ? data.EventMaster_TipeAcara.name : null}
-                  </Text>
-                </Grid.Col>
-              </Grid>
-
-              <Stack spacing={"xs"}>
-                <Text c={MainColor.white} fw={"bold"}>
-                  Tanggal & Waktu
-                </Text>
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={MainColor.white} fw={"bold"}>
-                      Mulai
-                    </Text>
-                  </Grid.Col>
-                  <Grid.Col span={1}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Text c={MainColor.white}>
-                      {moment(
-                        data.tanggal?.toLocaleString("id-ID", {
-                          dateStyle: "full",
-                        })
-                      ).format("dddd, DD MMMM YYYY, LT")}
-                    </Text>
-                  </Grid.Col>
-                </Grid>
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={MainColor.white} fw={"bold"}>
-                      Selesai
-                    </Text>
-                  </Grid.Col>
-                  <Grid.Col span={1}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Text c={MainColor.white}>
-                      {moment(
-                        data.tanggalSelesai?.toLocaleString("id-ID", {
-                          dateStyle: "full",
-                        })
-                      ).format("dddd, DD MMMM YYYY, LT")}
-                    </Text>
-                  </Grid.Col>
-                </Grid>
               </Stack>
-
+              <Event_ComponentDaftarPesertaDanSponsor />
-              <Stack spacing={2}>
-                <Text c={MainColor.white} fw={"bold"}>
-                  Deskripsi
-                </Text>
-                <Text c={MainColor.white}>{data ? data?.deskripsi : null}</Text>
-              </Stack>
-              <SimpleGrid
-                cols={2}
-                breakpoints={[
-                  { maxWidth: "48rem", cols: 2, spacing: "sm" },
-                  { maxWidth: "36rem", cols: 1, spacing: "sm" },
-                ]}
-              >
-                <Event_ComponentBoxDaftarPeserta />
-                <Event_ComponentBoxDaftarSponsor />
-              </SimpleGrid>
             </Stack>
           </Stack>
         </ComponentGlobal_CardStyles>

src/app_modules/event/create/create.tsx

@@ -16,6 +16,9 @@ import { useState } from "react";
 import { Event_ComponentCreateButton } from "../component";
 import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
 import { MainColor } from "@/app_modules/_global/color";
+import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
 
 export default function Event_Create({
   listTipeAcara,
@@ -55,7 +58,7 @@ export default function Event_Create({
             },
             input: {
               backgroundColor: MainColor.white,
-            }
+            },
           }}
           label="Judul"
           placeholder="Masukan judul"
@@ -81,7 +84,7 @@ export default function Event_Create({
             },
             dropdown: {
               backgroundColor: MainColor.white,
-            }
+            },
           }}
           withAsterisk
           label="Tipe Acara"
@@ -108,7 +111,7 @@ export default function Event_Create({
             },
             input: {
               backgroundColor: MainColor.white,
-            }
+            },
           }}
           label="Lokasi"
           placeholder="Masukan lokasi acara"
@@ -122,7 +125,6 @@ export default function Event_Create({
           }}
         />
 
-        
         <DateTimePicker
           styles={{
             label: {
@@ -133,7 +135,7 @@ export default function Event_Create({
             },
             input: {
               backgroundColor: MainColor.white,
-            }
+            },
           }}
           excludeDate={(date) => {
             return moment(date).diff(Date.now(), "days") < 0;
@@ -179,7 +181,7 @@ export default function Event_Create({
             },
             input: {
               backgroundColor: MainColor.white,
-            }
+            },
           }}
           excludeDate={(date) => {
             return moment(date).diff(Date.now(), "days") < 0;
@@ -218,6 +220,30 @@ export default function Event_Create({
         />
 
         <Stack spacing={5}>
+          <Text c={MainColor.white} fz={"sm"}>
+            Deskripsi
+            <Text inherit span c={"red"} px={5}>
+              *
+            </Text>
+          </Text>
+
+          <Component_V3_TextEditor
+            data={value.deskripsi}
+            onSetData={(val) => {
+              setValue({
+                ...value,
+                deskripsi: val,
+              });
+            }}
+          />
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: value.deskripsi }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>
+
+        {/* <Stack spacing={5}>
           <Textarea
             styles={{
               label: {
@@ -228,7 +254,7 @@ export default function Event_Create({
               },
               input: {
                 backgroundColor: MainColor.white,
-              }
+              },
             }}
             label="Deskripsi"
             placeholder="Deskripsikan acara yang akan di selenggarakan"
@@ -246,7 +272,7 @@ export default function Event_Create({
             lengthInput={value.deskripsi.length}
             maxInput={300}
           />
-        </Stack>
+        </Stack> */}
 
         <Event_ComponentCreateButton
           value={value}

src/app_modules/event/edit/index.tsx

@@ -25,6 +25,9 @@ import { Event_funEditById } from "../fun/edit/fun_edit_by_id";
 import { MODEL_EVENT } from "../_lib/interface";
 import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
 import { clientLogger } from "@/util/clientLogger";
+import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
 
 export default function Event_Edit({
   dataEvent,
@@ -57,8 +60,8 @@ export default function Event_Edit({
               backgroundColor: MainColor.white,
             },
             required: {
-              color: MainColor.red
+              color: MainColor.red,
-            }
+            },
           }}
           label="Judul"
           placeholder="judul"
@@ -89,7 +92,7 @@ export default function Event_Edit({
               backgroundColor: MainColor.white,
             },
             required: {
-              color: MainColor.red
+              color: MainColor.red,
             },
             dropdown: {
               backgroundColor: MainColor.white,
@@ -122,8 +125,8 @@ export default function Event_Edit({
               backgroundColor: MainColor.white,
             },
             required: {
-              color: MainColor.red
+              color: MainColor.red,
-            }
+            },
           }}
           label="Lokasi"
           placeholder="lokasi acara"
@@ -164,8 +167,8 @@ export default function Event_Edit({
               backgroundColor: MainColor.white,
             },
             required: {
-              color: MainColor.red
+              color: MainColor.red,
-            }
+            },
           }}
           excludeDate={(date) => {
             return moment(date).diff(Date.now(), "days") < 0;
@@ -208,8 +211,8 @@ export default function Event_Edit({
               backgroundColor: MainColor.white,
             },
             required: {
-              color: MainColor.red
+              color: MainColor.red,
-            }
+            },
           }}
           excludeDate={(date) => {
             return moment(date).diff(Date.now(), "days") < 0;
@@ -247,6 +250,34 @@ export default function Event_Edit({
         />
 
         <Stack spacing={5}>
+          <Text c={MainColor.white} fz={"sm"}>
+            Deskripsi
+            <Text inherit span c={"red"} px={5}>
+              *
+            </Text>
+          </Text>
+
+          <Component_V3_TextEditor
+            data={value.deskripsi}
+            onSetData={(val) => {
+              setValue({
+                ...value,
+                deskripsi: val.trim(),
+              });
+            }}
+          />
+
+          {funReplaceHtml({ html: value.deskripsi }).length === 0 && (
+            <ComponentGlobal_ErrorInput text="Masukan deskripsi" />
+          )}
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: value.deskripsi }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>
+
+        {/* <Stack spacing={5}>
           <Textarea
             styles={{
               label: {
@@ -256,8 +287,8 @@ export default function Event_Edit({
                 backgroundColor: MainColor.white,
               },
               required: {
-                color: MainColor.red
+                color: MainColor.red,
-              }
+              },
             }}
             label="Deskripsi"
             placeholder="Deskripsikan acara yang akan di selenggarakan"
@@ -283,7 +314,7 @@ export default function Event_Edit({
             maxInput={300}
             lengthInput={value.deskripsi.length}
           />
-        </Stack>
+        </Stack> */}
 
         <Button
           style={{
@@ -292,10 +323,11 @@ export default function Event_Edit({
           disabled={
             value.title === "" ||
             value.lokasi === "" ||
-            value.deskripsi === "" ||
             value.eventMaster_TipeAcaraId === 0 ||
             moment(value.tanggalSelesai?.toISOString().toString()) <
-              moment(value.tanggal.toISOString().toString())
+              moment(value.tanggal.toISOString().toString()) ||
+            funReplaceHtml({ html: value.deskripsi }).length > maxInputLength ||
+            funReplaceHtml({ html: value.deskripsi }).length === 0
           }
           loaderPosition="center"
           loading={isLoading ? true : false}
@@ -325,13 +357,13 @@ async function onUpdate(
     setLoading(true);
     const res = await Event_funEditById(value);
 
-  if (res.status === 200) {
+    if (res.status === 200) {
-    ComponentGlobal_NotifikasiBerhasil(res.message);
+      ComponentGlobal_NotifikasiBerhasil(res.message);
-    router.back();
+      router.back();
-  } else {
+    } else {
-    setLoading(false);
+      setLoading(false);
-    ComponentGlobal_NotifikasiGagal(res.message);
+      ComponentGlobal_NotifikasiGagal(res.message);
-  }
+    }
   } catch (error) {
     setLoading(false);
     clientLogger.error("Error update event", error);

src/app_modules/event/main/beranda.tsx

@@ -1,30 +1,28 @@
 "use client";
 
-import { gs_eventTriggerBeranda } from "@/lib/global_state";
-import { RouterEvent } from "@/lib/router_hipmi/router_event";
 import { AccentColor } from "@/app_modules/_global/color";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { API_RouteEvent } from "@/lib/api_user_router/route_api_event";
+import { gs_eventTriggerBeranda } from "@/lib/global_state";
+import { RouterEvent } from "@/lib/router_hipmi/router_event";
 import {
   Affix,
   Box,
   Button,
   Center,
   Loader,
-  rem,
+  rem
-  Skeleton,
-  Paper,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
-import { ComponentEvent_CardBeranda } from "../component/card_view/card_beranda";
-import { event_getListAllPublish } from "../fun/get/get_list_all_publish";
 import { MODEL_EVENT } from "../_lib/interface";
 import { Event_ComponentSkeletonBeranda } from "../component";
-import { API_RouteEvent } from "@/lib/api_user_router/route_api_event";
+import { ComponentEvent_CardBeranda } from "../component/card_view/card_beranda";
+import { event_getListAllPublish } from "../fun/get/get_list_all_publish";
 
 export default function Event_Beranda() {
   const [data, setData] = useState<MODEL_EVENT[] | null>(null);

src/app_modules/forum/create/new_create.tsx

@@ -11,7 +11,6 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import "react-quill/dist/quill.snow.css";
 import { forum_funCreate } from "../fun/create/fun_create";
-import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
 
 export default function Forum_NewCreate() {
   const [data, setData] = useState<string>("");
@@ -19,7 +18,7 @@ export default function Forum_NewCreate() {
 
   return (
     <Stack>
-      <Component_V3_TextEditor
+      {/* <Component_V3_TextEditor
         data={data}
         onSetData={(val) => {
           setData(val);
@@ -27,7 +26,7 @@ export default function Forum_NewCreate() {
         onSetLengthData={(val) => {
           setLengthData(val);
         }}
-      />
+      /> */}
 
       <Group position="apart">
         <ComponentGlobal_InputCountDown

src/app_modules/forum/edit/posting/index.tsx

@@ -2,7 +2,6 @@
 
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
 import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
 import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
@@ -45,7 +44,7 @@ export default function Forum_EditPosting() {
   return (
     <>
       <Stack>
-        <Component_V3_TextEditor
+        {/* <Component_V3_TextEditor
           data={data.diskusi}
           onSetData={(value) => {
             setData({
@@ -57,7 +56,7 @@ export default function Forum_EditPosting() {
             console.log(value);
             setLengthData(value);
           }}
-        />
+        /> */}
 
         {/* <Paper withBorder shadow="lg" p={"xs"}>
           <ReactQuill