#style: event ui

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>

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>
     </>
   );
 }