#style:

Deskripsi : - Perbaikan UI Donasi ## NO Issue
2024-07-22 10:29:51 +08:00
parent 8fa3f0332d
commit 73c6d58eef
89 changed files with 1686 additions and 1442 deletions
--- a/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx
+++ b/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx
@@ -27,6 +27,11 @@ import {
  maksimalUploadFile,
 } from "@/app_modules/_global/component/waring_popup";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";

 export default function EditCeritaPenggalangDonasi({
  dataCerita,
@@ -46,29 +51,49 @@ export default function EditCeritaPenggalangDonasi({
  return (
    <>
      {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
-      <Stack spacing={"md"} px={"md"}>
-        <Textarea
-          autosize
-          minRows={2}
-          maxRows={7}
-          withAsterisk
-          label="Pembukaan"
-          placeholder="Pembuka dari isi cerita"
-          value={value.pembukaan}
-          error={
-            value.pembukaan === "" ? (
-              <ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
-            ) : (
-              ""
-            )
-          }
-          onChange={(val) =>
-            setValue({
-              ...value,
-              pembukaan: val.target.value,
-            })
-          }
-        />
+      <Stack
+        spacing={"md"}
+        style={{
+          padding: "15px",
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          color: "white",
+        }}
+      >
+        <Stack spacing={5}>
+          <Textarea
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            autosize
+            minRows={2}
+            maxRows={7}
+            withAsterisk
+            label="Pembukaan"
+            placeholder="Pembuka dari isi cerita"
+            value={value.pembukaan}
+            error={
+              value.pembukaan === "" ? (
+                <ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
+              ) : (
+                ""
+              )
+            }
+            onChange={(val) =>
+              setValue({
+                ...value,
+                pembukaan: val.target.value,
+              })
+            }
+          />
+          <ComponentGlobal_InputCountDown
+            lengthInput={value.pembukaan.length}
+            maxInput={300}
+          />
+        </Stack>

        <Stack spacing={"lg"}>
          <Center>
@@ -93,20 +118,27 @@ export default function EditCeritaPenggalangDonasi({
            >
              {(props) => (
                <Button
-                  compact
                  {...props}
                  radius={"xl"}
-                  variant="outline"
-                  w={150}
                  leftIcon={<IconCamera />}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                >
                  Upload
                </Button>
              )}
            </FileButton>
          </Center>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"}>
+          <AspectRatio ratio={1 / 1} mah={300}>
+            <Paper
+              style={{
+                border: `2px solid ${AccentColor.blue}`,
+                backgroundColor: AccentColor.darkblue,
+                padding: "10px",
+                borderRadius: "10px",
+              }}
+            >
              <Image
                alt="Foto"
                src={
@@ -115,33 +147,45 @@ export default function EditCeritaPenggalangDonasi({
                    : RouterDonasi.api_image_cerita +
                      value.imageCeritaDonasi.url
                }
+                maw={200}
              />
            </Paper>
          </AspectRatio>
        </Stack>

-        <Textarea
-          autosize
-          minRows={2}
-          maxRows={7}
-          withAsterisk
-          label="Cerita"
-          placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
-          value={value.cerita}
-          error={
-            value.cerita === "" ? (
-              <ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
-            ) : (
-              ""
-            )
-          }
-          onChange={(val) =>
-            setValue({
-              ...value,
-              cerita: val.target.value,
-            })
-          }
-        />
+        <Stack spacing={5}>
+          <Textarea
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            autosize
+            minRows={2}
+            maxRows={7}
+            withAsterisk
+            label="Cerita"
+            placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
+            value={value.cerita}
+            error={
+              value.cerita === "" ? (
+                <ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
+              ) : (
+                ""
+              )
+            }
+            onChange={(val) =>
+              setValue({
+                ...value,
+                cerita: val.target.value,
+              })
+            }
+          />
+          <ComponentGlobal_InputCountDown
+            lengthInput={value.cerita.length}
+            maxInput={300}
+          />
+        </Stack>

        <Button
          style={{
@@ -155,6 +199,9 @@ export default function EditCeritaPenggalangDonasi({
          w={"100%"}
          radius={"xl"}
          onClick={() => onUpdate(router, value, file as any)}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
        >
          Update
        </Button>
--- a/src/app_modules/donasi/edit/edit_cerita_penggalang/layout.tsx
+++ b/src/app_modules/donasi/edit/edit_cerita_penggalang/layout.tsx
@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_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 LayoutEditCeritaPenggalangDonasi({
  children,
@@ -12,9 +14,9 @@ export default function LayoutEditCeritaPenggalangDonasi({
 }) {
  return (
    <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Update Cerita Penggalang" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Update Cerita Penggalang" />}>
        {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
    </>
  );
 }
--- a/src/app_modules/donasi/edit/edit_donasi/index.tsx
+++ b/src/app_modules/donasi/edit/edit_donasi/index.tsx
@@ -1,39 +1,35 @@
 "use client";

 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  Stack,
-  Select,
-  AspectRatio,
-  Paper,
-  Center,
-  Button,
-  TextInput,
-  Image,
-  FileButton,
-  Modal,
-  Group,
-  Title,
-  Text,
-} from "@mantine/core";
-import { IconCamera } from "@tabler/icons-react";
-import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
-import { gs_donasi_tabs_posting } from "../../global_state";
-import toast from "react-simple-toasts";
-import { MODEL_DONASI, MODEL_DONASI_ALL_MASTER } from "../../model/interface";
-import { useState } from "react";
-import { Donasi_funUpdateDonasi } from "../../fun/update/fun_update_donasi";
-import { useDisclosure } from "@mantine/hooks";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
-import _ from "lodash";
-import { Donasi_getOneById } from "../../fun/get/get_one_donasi_by_id";
+import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import {
  ComponentGlobal_WarningMaxUpload,
  maksimalUploadFile,
 } from "@/app_modules/_global/component/waring_popup";
-import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import {
+  AspectRatio,
+  Button,
+  Center,
+  FileButton,
+  Image,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconCamera } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
+import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
+import { Donasi_funUpdateDonasi } from "../../fun/update/fun_update_donasi";
+import { gs_donasi_tabs_posting } from "../../global_state";
+import { MODEL_DONASI, MODEL_DONASI_ALL_MASTER } from "../../model/interface";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";

 export default function EditDonasi({
  dataDonasi,
@@ -62,6 +58,11 @@ export default function EditDonasi({
      {/* <pre>{JSON.stringify(donasi, null, 2)}</pre> */}
      <Stack spacing={"md"} px={"md"}>
        <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
          label="Kategori"
          placeholder="Pilih kategori penggalangan dana"
          value={value.DonasiMaster_Ketegori.id}
@@ -80,8 +81,15 @@ export default function EditDonasi({
          }
        />
        <Stack>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"}>
+          <AspectRatio ratio={1 / 1} mah={300}>
+            <Paper
+              style={{
+                border: `2px solid ${AccentColor.blue}`,
+                backgroundColor: AccentColor.darkblue,
+                padding: "10px",
+                borderRadius: "10px",
+              }}
+            >
              <Image
                alt="Foto"
                src={
@@ -89,6 +97,7 @@ export default function EditDonasi({
                    ? updateImage
                    : RouterDonasi.api_gambar + `${value.imagesId}`
                }
+                maw={200}
              />
            </Paper>
          </AspectRatio>
@@ -114,12 +123,12 @@ export default function EditDonasi({
            >
              {(props) => (
                <Button
-                  compact
                  {...props}
                  radius={"xl"}
-                  variant="outline"
                  leftIcon={<IconCamera />}
-                  w={150}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                >
                  Upload
                </Button>
@@ -129,6 +138,11 @@ export default function EditDonasi({
        </Stack>
        <Stack>
          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
            withAsterisk
            label="Judul Donasi"
            placeholder="Contoh: Renovasi Masjid pada kampung, dll"
@@ -149,6 +163,11 @@ export default function EditDonasi({
            }
          />
          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
            icon={<Text fw={"bold"}>Rp.</Text>}
            min={0}
            withAsterisk
@@ -184,6 +203,11 @@ export default function EditDonasi({
            }}
          />
          <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
            label="Durasi"
            placeholder="Jangka waktu penggalangan dana"
            withAsterisk
@@ -214,6 +238,9 @@ export default function EditDonasi({
          onClick={() => {
            onUpdate(value, file as any, router);
          }}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
        >
          Update
        </Button>
--- a/src/app_modules/donasi/edit/edit_donasi/layout.tsx
+++ b/src/app_modules/donasi/edit/edit_donasi/layout.tsx
@@ -1,9 +1,8 @@
 "use client";

-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";

 export default function LayoutEditDonasi({
  children,
@@ -12,9 +11,9 @@ export default function LayoutEditDonasi({
 }) {
  return (
    <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Edit Donasi" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Donasi" />}>
        {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
    </>
  );
 }
--- a/src/app_modules/donasi/edit/edit_rekening/index.tsx
+++ b/src/app_modules/donasi/edit/edit_rekening/index.tsx
@@ -10,6 +10,7 @@ import { Donasi_funUpdateRekening } from "../../fun/update/fun_update_rekening";
 import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";

 export default function Donasi_EditRekening({
  dataDonasi,
@@ -25,6 +26,11 @@ export default function Donasi_EditRekening({
      <Stack spacing={"xl"}>
        <Stack spacing={"sm"}>
          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
            withAsterisk
            label="Nama Bank"
            placeholder="Masukan Nama Bank"
@@ -44,6 +50,11 @@ export default function Donasi_EditRekening({
            }
          />
          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
            withAsterisk
            type="number"
            label="Nomor Rekening"
@@ -75,6 +86,9 @@ export default function Donasi_EditRekening({
          }
          radius={"xl"}
          onClick={() => onUpdate(router, donasi, setLoading)}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
        >
          Update
        </Button>
--- a/src/app_modules/donasi/edit/edit_rekening/layout.tsx
+++ b/src/app_modules/donasi/edit/edit_rekening/layout.tsx
@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_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 LayoutDonasi_EditRekening({
  children,
@@ -12,11 +14,11 @@ export default function LayoutDonasi_EditRekening({
 }) {
  return (
    <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Edit Rekening" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Rekening" />}
      >
        {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
    </>
  );
 }