QC Investasi

# fix Tampilan admin investasi Tampilan admin donasi ## No issuee
2024-05-31 16:41:34 +08:00
parent c28cceb46f
commit 5b8cd3a4b6
175 changed files with 4785 additions and 2296 deletions
--- a/src/app_modules/donasi/create/create_cerita_penggalang.tsx
+++ b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
@@ -25,6 +25,12 @@ import toast from "react-simple-toasts";
 import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
 import { notifications } from "@mantine/notifications";
 import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
+import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
+import { tree } from "next/dist/build/templates/app-page";
+import {
+  ComponentGlobal_WarningMaxUpload,
+  maksimalUploadFile,
+} from "@/app_modules/component_global/variabel_global";

 export default function CreateCeritaPenggalangDonasi({
  dataTemporary,
@@ -34,6 +40,8 @@ export default function CreateCeritaPenggalangDonasi({
  userId: string;
 }) {
  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
    gs_donasi_tabs_posting
  );
@@ -41,8 +49,7 @@ export default function CreateCeritaPenggalangDonasi({
    pembukaan: "",
    cerita: "",
    namaBank: "",
-    rekening: ""
-    
+    rekening: "",
  });
  const [temporary, setTemporary] = useState(dataTemporary);
  const [file, setFile] = useState<File | null>(null);
@@ -73,6 +80,7 @@ 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);
        setTabsPostingDonasi("Review");
      } else {
@@ -87,35 +95,49 @@ export default function CreateCeritaPenggalangDonasi({
        <Stack spacing={"sm"}>
          <ComponentDonasi_NotedBox informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />

-          <Textarea
-            autosize
-            minRows={2}
-            maxRows={4}
-            withAsterisk
-            label="Pembukaan"
-            placeholder="Pembuka dari isi cerita"
-            onChange={(val) =>
-              setCreate({
-                ...create,
-                pembukaan: val.target.value,
-              })
-            }
-          />
+          <Stack spacing={5}>
+            <Textarea
+              autosize
+              minRows={2}
+              maxRows={4}
+              withAsterisk
+              label="Pembukaan"
+              placeholder="Pembuka dari isi cerita"
+              maxLength={300}
+              onChange={(val) =>
+                setCreate({
+                  ...create,
+                  pembukaan: val.target.value,
+                })
+              }
+            />
+            <ComponentGlobal_InputCountDown
+              maxInput={300}
+              lengthInput={create.pembukaan.length}
+            />
+          </Stack>

-          <Textarea
-            autosize
-            minRows={2}
-            maxRows={10}
-            withAsterisk
-            label="Cerita"
-            placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
-            onChange={(val) =>
-              setCreate({
-                ...create,
-                cerita: val.target.value,
-              })
-            }
-          />
+          <Stack spacing={5}>
+            <Textarea
+              autosize
+              minRows={2}
+              maxRows={10}
+              withAsterisk
+              label="Cerita"
+              placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
+              maxLength={300}
+              onChange={(val) =>
+                setCreate({
+                  ...create,
+                  cerita: val.target.value,
+                })
+              }
+            />
+            <ComponentGlobal_InputCountDown
+              maxInput={300}
+              lengthInput={create.cerita.length}
+            />
+          </Stack>

          <Stack spacing={"xs"}>
            <Center>
@@ -125,10 +147,12 @@ export default function CreateCeritaPenggalangDonasi({
                    const buffer = URL.createObjectURL(
                      new Blob([new Uint8Array(await files.arrayBuffer())])
                    );
-                    // console.log(buffer, "ini buffer");
-                    // console.log(files, " ini file");
-                    setImageCerita(buffer);
-                    setFile(files);
+                    if (files.size > maksimalUploadFile) {
+                      ComponentGlobal_WarningMaxUpload({});
+                    } else {
+                      setImageCerita(buffer);
+                      setFile(files);
+                    }
                  } catch (error) {
                    console.log(error);
                  }
@@ -161,10 +185,10 @@ export default function CreateCeritaPenggalangDonasi({
              </AspectRatio>
            ) : (
              <Center>
-              <Text fs={"italic"} fz={10}>
-                Upload poster atau gambar penggalangan !
-              </Text>
-            </Center>
+                <Text fs={"italic"} fz={10}>
+                  Upload poster atau gambar penggalangan !
+                </Text>
+              </Center>
            )}
          </Stack>
        </Stack>
@@ -175,26 +199,40 @@ export default function CreateCeritaPenggalangDonasi({
            withAsterisk
            placeholder="Contoh: BNI, BCA, MANDIRI, DLL"
            label="Nama Bank"
+            maxLength={50}
            onChange={(val) => {
              setCreate({
                ...create,
-                namaBank: _.upperCase(val.target.value)
-              })
+                namaBank: _.upperCase(val.target.value),
+              });
            }}
          />
          <TextInput
            withAsterisk
            placeholder="Maskuan nomor rekening"
            label="Nomor rekening"
+            maxLength={100}
            onChange={(val) => {
              setCreate({
                ...create,
-                rekening: val.target.value
-              })
+                rekening: val.target.value,
+              });
            }}
          />
        </Stack>
-        <Button w={"100%"} radius={"xl"} onClick={() => onCreate()}>
+        <Button
+          style={{
+            transition: "0.5s",
+          }}
+          disabled={
+            _.values(create).includes("") || file === null ? true : false
+          }
+          loaderPosition="center"
+          loading={isLoading ? true : false}
+          w={"100%"}
+          radius={"xl"}
+          onClick={() => onCreate()}
+        >
          Simpan
        </Button>
      </Stack>
--- a/src/app_modules/donasi/create/create_donasi.tsx
+++ b/src/app_modules/donasi/create/create_donasi.tsx
@@ -29,6 +29,11 @@ import toast from "react-simple-toasts";
 import _ from "lodash";
 import { notifications } from "@mantine/notifications";
 import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
+import {
+  ComponentGlobal_WarningMaxUpload,
+  maksimalUploadFile,
+} from "@/app_modules/component_global/variabel_global";
+import { gs_donasi_tabs_posting } from "../global_state";

 export default function CreateDonasi({
  masterKategori,
@@ -38,6 +43,8 @@ export default function CreateDonasi({
  masterDurasi: MODEL_DONASI_ALL_MASTER[];
 }) {
  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
  const [kategori, setKategori] = useState(masterKategori);
  const [durasi, setDurasi] = useState(masterDurasi);
  const [create, setCreate] = useState({
@@ -46,15 +53,19 @@ export default function CreateDonasi({
    target: "",
    durasiId: "",
  });
+  const [targetDana, setTargetDana] = useState("");
  const [file, setFile] = useState<File | null>(null);
  const [imageDonasi, setImageDonasi] = useState<any | null>();
+  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
+    gs_donasi_tabs_posting
+  );

  async function onCreate() {
    const body = {
      donasiMaster_KategoriId: create.kategoriId,
      donasiMaster_DurasiId: create.durasiId,
      title: create.title,
-      target: create.target,
+      target: targetDana,
    };

    if (_.values(body).includes("")) return NotifPeringatan("Lengkapin Data");
@@ -65,6 +76,8 @@ export default function CreateDonasi({

    await Donasi_funCreateTemporary(body as any, gambar).then((res) => {
      if (res.status === 201) {
+        setLoading(true);
+        setTabsPostingDonasi("Review");
        router.push(RouterDonasi.create_cerita_penggalang + `${res.donasiId}`);
      } else {
        toast(res.message);
@@ -97,18 +110,40 @@ export default function CreateDonasi({
            withAsterisk
            label="Judul Donasi"
            placeholder="Contoh: Renovasi Masjid pada kampung, dll"
-            onChange={(val) =>
-              setCreate({ ...create, title: val.target.value })
-            }
+            maxLength={100}
+            onChange={(val) => {
+              setCreate({ ...create, title: val.target.value });
+            }}
          />
          <TextInput
-            type="number"
+            icon={<Text fw={"bold"}>Rp.</Text>}
+            min={0}
            withAsterisk
            label="Target Dana"
-            placeholder="Masukan nominal angka"
-            onChange={(val) =>
-              setCreate({ ...create, target: val.target.value })
-            }
+            placeholder="0"
+            value={create.target}
+            onChange={(val) => {
+              // console.log(val.currentTarget.value, "nilai");
+              const match = val.currentTarget.value
+                .replace(/\./g, "")
+                .match(/^[0-9]+$/);
+
+              if (val.currentTarget.value === "")
+                return setCreate({
+                  ...create,
+                  target: 0 + "",
+                });
+              if (!match?.[0]) return null;
+
+              const nilai = val.currentTarget.value.replace(/\./g, "");
+              const target = Intl.NumberFormat("id-ID").format(+nilai);
+
+              setTargetDana(nilai);
+              setCreate({
+                ...create,
+                target,
+              });
+            }}
          />
          <Select
            label="Durasi"
@@ -130,10 +165,13 @@ export default function CreateDonasi({
                  const buffer = URL.createObjectURL(
                    new Blob([new Uint8Array(await files.arrayBuffer())])
                  );
-                  // console.log(buffer, "ini buffer");
-                  // console.log(files, " ini file");
-                  setImageDonasi(buffer);
-                  setFile(files);
+
+                  if (files.size > maksimalUploadFile) {
+                    ComponentGlobal_WarningMaxUpload({});
+                  } else {
+                    setImageDonasi(buffer);
+                    setFile(files);
+                  }
                } catch (error) {
                  console.log(error);
                }
@@ -142,7 +180,7 @@ export default function CreateDonasi({
            >
              {(props) => (
                <Button
-                compact
+                  compact
                  {...props}
                  radius={"xl"}
                  variant="outline"
@@ -155,8 +193,8 @@ export default function CreateDonasi({
            </FileButton>
          </Center>
          {imageDonasi ? (
-            <AspectRatio ratio={16 / 9}>
-              <Paper radius={"md"}>
+            <AspectRatio ratio={1 / 1} onChange={(val) => console.log(val)}>
+              <Paper radius={"sm"} withBorder>
                <Image
                  alt="Foto"
                  src={imageDonasi ? imageDonasi : "/aset/no-img.png"}
@@ -171,7 +209,19 @@ export default function CreateDonasi({
            </Center>
          )}
        </Stack>
-        <Button my={"lg"} radius={"xl"} onClick={() => onCreate()}>
+        <Button
+          style={{
+            transition: "0.5s",
+          }}
+          disabled={
+            _.values(create).includes("") || file === null ? true : false
+          }
+          loaderPosition="center"
+          loading={isLoading ? true : false}
+          my={"lg"}
+          radius={"xl"}
+          onClick={() => onCreate()}
+        >
          Selanjutnya
        </Button>
      </Stack>