#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/create/create_cerita_penggalang.tsx
+++ b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
@@ -27,8 +27,13 @@ import toast from "react-simple-toasts";
 import ComponentDonasi_NotedBox from "../component/noted_box";
 import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
 import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
-import { gs_donasi_tabs_posting } from "../global_state";
+import { gs_donasi_hot_menu, gs_donasi_tabs_posting } from "../global_state";
 import { MODEL_DONASI_TEMPORARY } from "../model/interface";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 export default function CreateCeritaPenggalangDonasi({
  dataTemporary,
  userId,
@@ -42,6 +47,8 @@ export default function CreateCeritaPenggalangDonasi({
  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
    gs_donasi_tabs_posting
  );
+  const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu);
+
  const [create, setCreate] = useState({
    pembukaan: "",
    cerita: "",
@@ -78,8 +85,9 @@ export default function CreateCeritaPenggalangDonasi({
    await Donasi_funCreate(body as any, gambar).then((res) => {
      if (res.status === 201) {
        setLoading(true);
-        router.push(RouterDonasi.page_pop_up_create);
+        router.push(RouterDonasi.page_pop_up_create, { scroll: false });
        setTabsPostingDonasi("Review");
+        setDonasiHotMenu(1);
      } else {
        toast(res.message);
      }
@@ -87,19 +95,24 @@ export default function CreateCeritaPenggalangDonasi({
  }
  return (
    <>
-      <Stack spacing={50} px={"md"}>
+      <Stack spacing={50} px={"md"} py={"md"}>
        {/* <pre>{JSON.stringify(dataTempo, null, 2)}</pre> */}
        <Stack spacing={"sm"}>
-          <ComponentDonasi_NotedBox informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />
+          <ComponentGlobal_BoxInformation informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />

          <Stack spacing={5}>
            <Textarea
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
              autosize
              minRows={2}
              maxRows={4}
              withAsterisk
              label="Pembukaan"
-              placeholder="Pembuka dari isi cerita"
+              placeholder="Pembuka cerita"
              maxLength={300}
              onChange={(val) =>
                setCreate({
@@ -116,6 +129,11 @@ export default function CreateCeritaPenggalangDonasi({

          <Stack spacing={5}>
            <Textarea
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
              autosize
              minRows={2}
              maxRows={10}
@@ -158,12 +176,12 @@ export default function CreateCeritaPenggalangDonasi({
              >
                {(props) => (
                  <Button
-                    compact
                    {...props}
                    radius={"xl"}
-                    variant="outline"
-                    w={150}
                    leftIcon={<IconCamera />}
+                    bg={MainColor.yellow}
+                    color="yellow"
+                    c={"black"}
                  >
                    Upload
                  </Button>
@@ -172,17 +190,25 @@ export default function CreateCeritaPenggalangDonasi({
            </Center>

            {imageCerita ? (
-              <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={imageCerita ? imageCerita : "/aset/no-img.png"}
+                    maw={200}
                  />
                </Paper>
              </AspectRatio>
            ) : (
              <Center>
-                <Text fs={"italic"} fz={10}>
+                <Text fs={"italic"} fz={10} c={"white"}>
                  Upload poster atau gambar penggalangan !
                </Text>
              </Center>
@@ -191,8 +217,13 @@ export default function CreateCeritaPenggalangDonasi({
        </Stack>

        <Stack spacing={"sm"}>
-          <ComponentDonasi_NotedBox informasi="Lengkapi nama bank dan rekening di bawah untuk mempermudah admin jika penggalangan dana ini telah di publish!" />
+          <ComponentGlobal_BoxInformation informasi="Lengkapi nama bank dan rekening di bawah untuk mempermudah admin jika penggalangan dana ini telah di publish!" />
          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
            withAsterisk
            placeholder="Contoh: BNI, BCA, MANDIRI, DLL"
            label="Nama Bank"
@@ -205,6 +236,11 @@ export default function CreateCeritaPenggalangDonasi({
            }}
          />
          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
            withAsterisk
            placeholder="Maskuan nomor rekening"
            label="Nomor rekening"
@@ -229,6 +265,9 @@ export default function CreateCeritaPenggalangDonasi({
          w={"100%"}
          radius={"xl"}
          onClick={() => onCreate()}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
        >
          Simpan
        </Button>
--- a/src/app_modules/donasi/create/create_donasi.tsx
+++ b/src/app_modules/donasi/create/create_donasi.tsx
@@ -11,12 +11,17 @@ import {
  Select,
  Stack,
  Text,
-  TextInput
+  TextInput,
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";

+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import {
  ComponentGlobal_WarningMaxUpload,
  maksimalUploadFile,
@@ -24,11 +29,11 @@ import {
 import _ from "lodash";
 import { useState } from "react";
 import toast from "react-simple-toasts";
-import ComponentDonasi_NotedBox from "../component/noted_box";
 import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
 import Donasi_funCreateTemporary from "../fun/create/fun_create_donasi_temporary";
 import { gs_donasi_tabs_posting } from "../global_state";
 import { MODEL_DONASI_ALL_MASTER } from "../model/interface";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";

 export default function CreateDonasi({
  masterKategori,
@@ -75,16 +80,21 @@ export default function CreateDonasi({
        setTabsPostingDonasi("Review");
        router.push(RouterDonasi.create_cerita_penggalang + `${res.donasiId}`);
      } else {
-        toast(res.message);
+        return ComponentGlobal_NotifikasiGagal(res.message);
      }
    });
  }

  return (
    <>
-      <Stack spacing={"md"} px={"md"}>
-        <ComponentDonasi_NotedBox informasi="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita Penggalangan Dana!" />
+      <Stack spacing={"md"} px={"xs"}>
+        <ComponentGlobal_BoxInformation informasi="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita Penggalangan Dana!" />
        <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
          label="Kategori"
          placeholder="Pilih kategori penggalangan dana"
          withAsterisk
@@ -102,6 +112,11 @@ export default function CreateDonasi({

        <Stack>
          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
            withAsterisk
            label="Judul Donasi"
            placeholder="Contoh: Renovasi Masjid pada kampung, dll"
@@ -111,6 +126,11 @@ export default function CreateDonasi({
            }}
          />
          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
            icon={<Text fw={"bold"}>Rp.</Text>}
            min={0}
            withAsterisk
@@ -141,6 +161,11 @@ export default function CreateDonasi({
            }}
          />
          <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
            label="Durasi"
            placeholder="Jangka waktu penggalangan dana"
            withAsterisk
@@ -175,12 +200,12 @@ export default function CreateDonasi({
            >
              {(props) => (
                <Button
-                  compact
                  {...props}
                  radius={"xl"}
-                  variant="outline"
-                  w={150}
                  leftIcon={<IconCamera />}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                >
                  Upload
                </Button>
@@ -188,17 +213,25 @@ export default function CreateDonasi({
            </FileButton>
          </Center>
          {imageDonasi ? (
-            <AspectRatio ratio={1 / 1} onChange={(val) => console.log(val)}>
-              <Paper radius={"sm"} withBorder>
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.blue}`,
+                  backgroundColor: AccentColor.darkblue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
                <Image
                  alt="Foto"
                  src={imageDonasi ? imageDonasi : "/aset/no-img.png"}
+                  maw={200}
                />
              </Paper>
            </AspectRatio>
          ) : (
            <Center>
-              <Text fs={"italic"} fz={10}>
+              <Text fs={"italic"} fz={10} c={"white"}>
                Upload poster atau gambar penggalangan !
              </Text>
            </Center>
@@ -216,6 +249,9 @@ export default function CreateDonasi({
          my={"lg"}
          radius={"xl"}
          onClick={() => onCreate()}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
        >
          Selanjutnya
        </Button>
--- a/src/app_modules/donasi/create/layout.tsx
+++ b/src/app_modules/donasi/create/layout.tsx
@@ -1,14 +1,21 @@
-"use client"
+"use client";

-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate"
-import React from "react"
-import ComponentDonasi_HeaderTamplate from "../component/header_tamplate"
+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";

-export default function LayoutCreateDonasi({children}: {children: React.ReactNode}){
-    return<>
-    <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Buat Donasi"/>}>
+export default function LayoutCreateDonasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Donasi" />}
+      >
        {children}
-    </AppComponentGlobal_LayoutTamplate>
-    
+      </UIGlobal_LayoutTamplate>
    </>
-}
+  );
+}