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 { AccentColor, MainColor } from "../color/color_pallet";
+import { Grid, Stack, Text } from "@mantine/core";
 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
-        bg={"blue.3"}
-        p={10}
-        style={{
-          backgroundColor: AccentColor.blue,
-          border: `2px solid ${AccentColor.softblue}`,
-          borderRadius: "10px",
-        }}
-      >
+      <ComponentGlobal_CardStyles>
         {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"],