From b67303d28ba31f0d08acb15c6055f10d9d44b375 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Thu, 18 Jul 2024 11:17:20 +0800
Subject: [PATCH] #style: event ui

---
 src/app/dev/colab/main/beranda/loading.tsx |   9 --
 src/app_modules/colab/create/index.tsx     | 106 ++++++++++++++++-----
 src/app_modules/colab/create/layout.tsx    |   8 +-
 src/app_modules/colab/main/beranda.tsx     |  21 ++--
 src/app_modules/colab/main/layout.tsx      | 105 ++++++++++++--------
 src/app_modules/colab/splash/index.tsx     |  10 +-
 6 files changed, 167 insertions(+), 92 deletions(-)
 delete mode 100644 src/app/dev/colab/main/beranda/loading.tsx

diff --git a/src/app/dev/colab/main/beranda/loading.tsx b/src/app/dev/colab/main/beranda/loading.tsx
deleted file mode 100644
index 380b3fcd..00000000
--- a/src/app/dev/colab/main/beranda/loading.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}
diff --git a/src/app_modules/colab/create/index.tsx b/src/app_modules/colab/create/index.tsx
index 4e850f85..e02e3e78 100644
--- a/src/app_modules/colab/create/index.tsx
+++ b/src/app_modules/colab/create/index.tsx
@@ -21,6 +21,8 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import _ from "lodash";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
 
 export default function Colab_Create({
   listIndustri,
@@ -39,6 +41,12 @@ export default function Colab_Create({
     <>
       <Stack px={"sm"}>
         <TextInput
+          maxLength={100}
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Judul"
           withAsterisk
           placeholder="Masukan judul proyek"
@@ -51,6 +59,12 @@ export default function Colab_Create({
         />
 
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          maxLength={100}
           label="Lokasi"
           withAsterisk
           placeholder="Masukan lokasi proyek"
@@ -63,6 +77,11 @@ export default function Colab_Create({
         />
 
         <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           placeholder="Pilih kategori industri"
           label="Pilih Industri"
           withAsterisk
@@ -96,30 +115,55 @@ export default function Colab_Create({
           }}
         /> */}
 
-        <Textarea
-          label="Tujuan Proyek"
-          placeholder="Masukan tujuan proyek"
-          withAsterisk
-          minRows={5}
-          onChange={(val) => {
-            setValue({
-              ...value,
-              purpose: val.currentTarget.value,
-            });
-          }}
-        />
+        <Stack spacing={5}>
+          <Textarea
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            maxLength={500}
+            label="Tujuan Proyek"
+            placeholder="Masukan tujuan proyek"
+            withAsterisk
+            minRows={5}
+            onChange={(val) => {
+              setValue({
+                ...value,
+                purpose: val.currentTarget.value,
+              });
+            }}
+          />
+          <ComponentGlobal_InputCountDown
+            lengthInput={value.purpose.length}
+            maxInput={500}
+          />
+        </Stack>
+
+        <Stack spacing={5}>
+          <Textarea
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            maxLength={500}
+            label="Keuntungan "
+            placeholder="Masukan keuntungan dalam proyek"
+            minRows={5}
+            onChange={(val) => {
+              setValue({
+                ...value,
+                benefit: val.currentTarget.value,
+              });
+            }}
+          />
+          <ComponentGlobal_InputCountDown
+            lengthInput={value.benefit.length}
+            maxInput={500}
+          />
+        </Stack>
 
-        <Textarea
-          label="Keuntungan "
-          placeholder="Masukan keuntungan dalam proyek"
-          minRows={5}
-          onChange={(val) => {
-            setValue({
-              ...value,
-              benefit: val.currentTarget.value,
-            });
-          }}
-        />
         <ButtonAction value={value as any} />
       </Stack>
     </>
@@ -154,14 +198,30 @@ function ButtonAction({ value }: { value: any }) {
     });
   }
 
+  // console.log(value);
+
   return (
     <>
       <Button
+        disabled={
+          !value.title ||
+          !value.lokasi ||
+          !value.purpose ||
+          !value.benefit ||
+          value.projectCollaborationMaster_IndustriId === 0
+            ? true
+            : false
+        }
         loaderPosition="center"
         loading={loading ? true : false}
         mt={"xl"}
         radius={"xl"}
         onClick={() => onSave()}
+        bg={MainColor.yellow}
+        color={"yellow"}
+        style={{
+          transition: "0.5s",
+        }}
       >
         Simpan
       </Button>
diff --git a/src/app_modules/colab/create/layout.tsx b/src/app_modules/colab/create/layout.tsx
index 2dd809ab..05e86b3e 100644
--- a/src/app_modules/colab/create/layout.tsx
+++ b/src/app_modules/colab/create/layout.tsx
@@ -3,6 +3,8 @@
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 import React from "react";
 import ComponentColab_HeaderTamplate from "../component/header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutColab_Create({
   children,
@@ -11,11 +13,11 @@ export default function LayoutColab_Create({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentColab_HeaderTamplate title="Tambah Proyek" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Proyek" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/colab/main/beranda.tsx b/src/app_modules/colab/main/beranda.tsx
index 957de11f..8f53e41a 100644
--- a/src/app_modules/colab/main/beranda.tsx
+++ b/src/app_modules/colab/main/beranda.tsx
@@ -1,31 +1,22 @@
 "use client";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
 import {
   ActionIcon,
   Affix,
   Card,
-  Center,
-  Grid,
-  Paper,
   Stack,
-  Text,
-  Textarea,
-  Title,
-  rem,
+  rem
 } from "@mantine/core";
 import { useWindowScroll } from "@mantine/hooks";
 import { IconPencilPlus } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentColab_CardSectionData from "../component/card_view/card_section_data";
-import ComponentColab_SectionHeaderAuthorName from "../component/card_view/card_section_header_author_name";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
 import ComponentColab_CardSectionHeaderAuthorName from "../component/card_view/card_section_header_author_name";
-import { MODEL_COLLABORATION } from "../model/interface";
 import ComponentColab_JumlahPartisipan from "../component/card_view/card_section_jumlah_partisipan";
+import { MODEL_COLLABORATION } from "../model/interface";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 
 export default function Colab_Beranda({
   listData,
@@ -40,7 +31,7 @@ export default function Colab_Beranda({
 
   return (
     <>
-      <Affix position={{ bottom: rem(150), right: rem(30) }}>
+      {/* <Affix position={{ bottom: rem(150), right: rem(30) }}>
         <ActionIcon
           loading={loadingCreate ? true : false}
           opacity={scroll.y > 0 ? 0.5 : ""}
@@ -58,7 +49,9 @@ export default function Colab_Beranda({
         >
           <IconPencilPlus color="white" />
         </ActionIcon>
-      </Affix>
+      </Affix> */}
+
+      <ComponentGlobal_CreateButton path={RouterColab.create} />
 
       {/* <pre>{JSON.stringify(listData, null, 2)}</pre> */}
 
diff --git a/src/app_modules/colab/main/layout.tsx b/src/app_modules/colab/main/layout.tsx
index 0d9c6cc4..f0a69ed6 100644
--- a/src/app_modules/colab/main/layout.tsx
+++ b/src/app_modules/colab/main/layout.tsx
@@ -9,20 +9,24 @@ import {
   Footer,
   Grid,
   Indicator,
+  SimpleGrid,
   Stack,
-  Text
+  Text,
 } from "@mantine/core";
 import {
   IconBell,
   IconHome,
   IconMessages,
-  IconUsersGroup
+  IconUsersGroup,
 } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 import ComponentColab_HeaderTamplate from "../component/header_tamplate";
 import { gs_colab_hot_menu } from "../global_state";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function LayoutColab_Main({
   children,
@@ -78,51 +82,74 @@ export default function LayoutColab_Main({
 
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentColab_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Project Collaboration"
-            route={RouterHome.main_home}
-            // icon={<IconUsersGroup />}
-            // route2={RouterColab.proyek}
+            routerLeft={RouterHome.main_home}
           />
         }
         footer={
-          <Footer height={"10vh"} bg={"black"}>
-            {/* {value} */}
-            <Stack justify="center" h={"100%"}>
-              <Grid>
-                {listFooter.map((e) => (
-                  <Grid.Col key={e.id} span={"auto"} pt={"md"}>
-                    <Center>
-                      <Stack
-                        align="center"
-                        spacing={0}
-                        onClick={() => {
-                          router.replace(e.path);
-                          setHotMenu(e.id);
-                        }}
-                      >
-                        <ActionIcon
-                          variant="transparent"
-                          c={hotMenu === e.id ? "blue" : "white"}
-                        >
-                          {e.icon}
-                        </ActionIcon>
-                        <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
-                          {e.name}
-                        </Text>
-                      </Stack>
-                    </Center>
-                  </Grid.Col>
-                ))}
-              </Grid>
-            </Stack>
-          </Footer>
+          <SimpleGrid cols={4} h={"9vh"} mx={"xs"}>
+            {listFooter.map((e) => (
+              <Stack key={e.id} align="center" justify="center" spacing={0}>
+                <ActionIcon
+                  // disabled={e.path === "" ? true : false}
+                  variant="transparent"
+                  c={hotMenu === e.id ? MainColor.yellow : "white"}
+                  onClick={() => {
+                    router.replace(e.path, {scroll: false});
+                    setHotMenu(e.id);
+                  }}
+                >
+                  {e.icon}
+                </ActionIcon>
+                <Text
+                  c={hotMenu === e.id ? MainColor.yellow : "white"}
+                  fz={"xs"}
+                  lineClamp={1}
+                >
+                  {e.name}
+                </Text>
+              </Stack>
+            ))}
+          </SimpleGrid>
+
+          // <Footer height={"10vh"} bg={"black"}>
+          //   {/* {value} */}
+          //   <Stack justify="center" h={"100%"}>
+          //     <Grid>
+          //       {listFooter.map((e) => (
+          //         <Grid.Col key={e.id} span={"auto"} pt={"md"}>
+          //           <Center>
+          //             <Stack
+          //               align="center"
+          //               spacing={0}
+          //               onClick={() => {
+          //                 router.replace(e.path);
+          //                 setHotMenu(e.id);
+          //               }}
+          //             >
+          //               <ActionIcon
+          //                 variant="transparent"
+          //                 c={hotMenu === e.id ? "blue" : "white"}
+          //               >
+          //                 {e.icon}
+          //               </ActionIcon>
+          //               <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
+          //                 {e.name}
+          //               </Text>
+          //             </Stack>
+          //           </Center>
+          //         </Grid.Col>
+          //       ))}
+          //     </Grid>
+          //   </Stack>
+          // </Footer>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/colab/splash/index.tsx b/src/app_modules/colab/splash/index.tsx
index 659b4d97..48839abb 100644
--- a/src/app_modules/colab/splash/index.tsx
+++ b/src/app_modules/colab/splash/index.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import { Center, Image, Paper } from "@mantine/core";
+import UIGlobal_SplashScreen from "@/app_modules/_global/ui/ui_splash";
 import { useShallowEffect } from "@mantine/hooks";
+import { IconAffiliate } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { gs_colab_hot_menu } from "../global_state";
@@ -15,17 +16,18 @@ export default function Colab_Splash() {
     setTimeout(() => {
       setHotMenu(1);
       // setStatus("Publish");
-      router.replace(RouterColab.beranda);
+      router.replace(RouterColab.beranda, {scroll: false});
     }, 1000);
   }, []);
 
   return (
     <>
-      <Center h={"100vh"}>
+      {/* <Center h={"100vh"}>
         <Paper p={{ base: 50, md: 60, lg: 80 }}>
           <Image alt="logo" src={"/aset/colab/logo.png"} />
         </Paper>
-      </Center>
+      </Center> */}
+      <UIGlobal_SplashScreen icon={<IconAffiliate size={300} />} />
     </>
   );
 }