#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/proses_donasi/invoice/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/invoice/index.tsx
@@ -1,12 +1,11 @@
 "use client";

+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
-  Box,
  Button,
  Center,
  CopyButton,
  FileButton,
-  FileInput,
  Grid,
  Group,
  Paper,
@@ -14,21 +13,22 @@ import {
  Text,
  Title,
 } from "@mantine/core";
+import { IconCamera, IconCircleCheck } from "@tabler/icons-react";
 import { useAtom } from "jotai";
-import { gs_donasi_hot_menu, gs_proses_donasi } from "../../global_state";
-import { MODEL_DONASI, MODEL_DONASI_INVOICE } from "../../model/interface";
-import { useState } from "react";
-import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
-import ComponentDonasi_TampilanHitungMundur from "../../component/tampilan_hitung_mundur";
-import { useRouter } from "next/navigation";
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { Donasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
+import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
 import { Donasi_funUploadBuktiTransferById } from "../../fun/update/fun_update_invoice";
-import { buffer } from "stream/consumers";
-import { IconCamera, IconCheck, IconCircleCheck } from "@tabler/icons-react";
+import { Donasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
+import { gs_donasi_hot_menu } from "../../global_state";
+import { MODEL_DONASI_INVOICE } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";

 export default function Donasi_InvoiceProses({
  dataInvoice,
@@ -43,8 +43,18 @@ export default function Donasi_InvoiceProses({

  return (
    <>
-      <Stack spacing={"lg"}>
-        <Stack spacing={0}>
+      <Stack spacing={"lg"} py={"md"}>
+        <Stack
+          spacing={0}
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
          <Title order={5}>Mohon transfer ke rekening dibawah</Title>
          <Group spacing={"xs"}>
            <Text>untuk diteruskan ke </Text>
@@ -52,17 +62,38 @@ export default function Donasi_InvoiceProses({
          </Group>
        </Stack>

-        <Paper p={"sm"} withBorder>
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "15px",
+          }}
+        >
          <Stack spacing={"md"}>
            <Stack spacing={0}>
              <Text>Bank {invoice.DonasiMaster_Bank.name}</Text>
              <Text>PT. Himpunan Pengusaha Badung</Text>
            </Stack>
-            <Paper bg={"gray.1"} p={"sm"} radius={"md"}>
+            <Paper
+              style={{
+                backgroundColor: AccentColor.softblue,
+                border: `2px solid ${AccentColor.blue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+              }}
+            >
              <Grid>
                <Grid.Col span={8}>
                  <Group position="left" align="center" h={"100%"}>
-                    <Title order={4}>{invoice.DonasiMaster_Bank.norek}</Title>
+                    <Title order={4} color={MainColor.yellow}>
+                      {invoice.DonasiMaster_Bank.norek}
+                    </Title>
                  </Group>
                </Grid.Col>
                <Grid.Col span={4}>
@@ -70,10 +101,12 @@ export default function Donasi_InvoiceProses({
                    <CopyButton value={invoice.DonasiMaster_Bank.norek}>
                      {({ copied, copy }) => (
                        <Button
-                          color={copied ? "teal" : "blue"}
-                          variant="outline"
+                          style={{
+                            transition: "0.5s",
+                          }}
                          radius={"xl"}
                          onClick={copy}
+                          color={copied ? "teal" : "yellow"}
                        >
                          {copied ? "Berhasil" : "Salin"}
                        </Button>
@@ -86,16 +119,35 @@ export default function Donasi_InvoiceProses({
          </Stack>
        </Paper>

-        <Paper p={"sm"} withBorder>
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "15px",
+          }}
+        >
          <Stack spacing={"md"}>
            <Stack spacing={0}>
              <Text>Jumlah transfer</Text>
            </Stack>
-            <Paper bg={"gray.1"} p={"sm"} radius={"md"}>
+            <Paper
+              style={{
+                backgroundColor: AccentColor.softblue,
+                border: `2px solid ${AccentColor.blue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+              }}
+            >
              <Grid>
                <Grid.Col span={8}>
                  <Group position="left" align="center" h={"100%"}>
-                    <Title order={4}>
+                    <Title order={4} color="white">
                      <TampilanRupiahDonasi nominal={+(+invoice.nominal)} />
                    </Title>
                  </Group>
@@ -105,9 +157,12 @@ export default function Donasi_InvoiceProses({
                    <CopyButton value={"" + +invoice.nominal}>
                      {({ copied, copy }) => (
                        <Button
-                          color={copied ? "teal" : "blue"}
-                          variant="outline"
+                          style={{
+                            transition: "0.5s",
+                          }}
+                          variant="filled"
                          radius={"xl"}
+                          color={copied ? "teal" : "yellow"}
                          onClick={copy}
                        >
                          {copied ? "Berhasil" : "Salin"}
@@ -118,13 +173,23 @@ export default function Donasi_InvoiceProses({
                </Grid.Col>
              </Grid>
            </Paper>
-            <Text fz={"xs"} c={"gray"}>
+            {/* <Text fz={"xs"} c={"gray"}>
              Sudah termasuk biaya admin Rp. 2.500,-
-            </Text>
+            </Text> */}
          </Stack>
        </Paper>

-        <Paper p={"md"} withBorder>
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "15px",
+          }}
+        >
          <Stack spacing={"sm"}>
            <Center>
              <FileButton
@@ -147,9 +212,9 @@ export default function Donasi_InvoiceProses({
                  <Button
                    {...props}
                    radius={"xl"}
-                    variant="outline"
-                    w={150}
                    leftIcon={<IconCamera />}
+                    bg={MainColor.yellow}
+                    color="yellow"
                  >
                    Upload
                  </Button>
@@ -178,8 +243,9 @@ export default function Donasi_InvoiceProses({
        {file !== null ? (
          <Button
            radius={"xl"}
-            bg={"orange"}
-            color="orange"
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
            onClick={() => onClick(router, invoice.id, setActive)}
          >
            Saya Sudah Transfer
--- a/src/app_modules/donasi/proses_donasi/invoice/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/invoice/layout.tsx
@@ -11,6 +11,8 @@ import { useAtom } from "jotai";
 import { title } from "process";
 import { useRouter } from "next/navigation";
 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_InvoiceProses({
  children,
@@ -25,21 +27,20 @@ export default function LayoutDonasi_InvoiceProses({
  }
  return (
    <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
        header={
-          <Header height={50} sx={{ borderStyle: "none" }}>
-            <Group h={50} position="apart" px={"md"}>
+          <UIGlobal_LayoutHeaderTamplate
+            title="Invoice"
+            customButtonLeft={
              <ActionIcon variant="transparent" onClick={() => onClick()}>
-                <IconX />
+                <IconX color="white"/>
              </ActionIcon>
-              <Title order={5}>Invoice</Title>
-              <ActionIcon disabled variant="transparent"></ActionIcon>
-            </Group>
-          </Header>
+            }
+          />
        }
      >
        {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
    </>
  );
 }
--- a/src/app_modules/donasi/proses_donasi/masukan_donasi/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/masukan_donasi/index.tsx
@@ -1,17 +1,19 @@
 "use client";

 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import {
  Box,
  Button,
-  Grid,
  Group,
-  NumberInput,
  Paper,
  Stack,
  Text,
  TextInput,
-  Title,
+  Title
 } from "@mantine/core";
 import {
  IconChevronRight,
@@ -20,10 +22,10 @@ import {
  IconMoodSmileDizzy,
  IconMoodXd,
 } from "@tabler/icons-react";
+import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
-import { useAtom } from "jotai";
 import { gs_proses_donasi } from "../../global_state";

 const listNominal = [
@@ -75,12 +77,16 @@ export default function MasukanDonasi({ donasiId }: { donasiId: string }) {
          {listNominal.map((e) => (
            <Paper
              key={e.id}
-              withBorder
-              radius={"md"}
-              p={"sm"}
-              shadow="lg"
-              mb={"md"}
              onClick={() => onProses(e.jumlah)}
+              style={{
+                backgroundColor: AccentColor.blue,
+                border: `2px solid ${AccentColor.darkblue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+                marginBottom: "15px",
+              }}
            >
              <Group position="apart">
                <Group>
@@ -97,7 +103,17 @@ export default function MasukanDonasi({ donasiId }: { donasiId: string }) {
            </Paper>
          ))}
        </Box>
-        <Paper p={"sm"} withBorder shadow="lg">
+
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
          <Stack>
            <Text>Nominal Lainnya</Text>
            <TextInput
@@ -133,6 +149,9 @@ export default function MasukanDonasi({ donasiId }: { donasiId: string }) {
          disabled={value === 0 || value < 10000}
          radius={"xl"}
          onClick={() => onProses(value)}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
        >
          Lanjutan Pembayaran
        </Button>
--- a/src/app_modules/donasi/proses_donasi/masukan_donasi/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/masukan_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 LayoutMasukanDonasi({
  children,
@@ -12,11 +11,13 @@ export default function LayoutMasukanDonasi({
 }) {
  return (
    <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Masukan Nominal Donasi" />}
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate title="Masukan Nominal Donasi" />
+        }
      >
        {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
    </>
  );
 }
--- a/src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx
@@ -12,6 +12,10 @@ import { Donasi_getNamaBank } from "../../fun/get/get_nama_bank";
 import { Donasi_funCreateInvoice } from "../../fun/create/fun_create_invoice";
 import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";

 export default function Donasi_MetodePembayaran({
  listBank,
@@ -58,17 +62,39 @@ export default function Donasi_MetodePembayaran({
      <Stack>
        {/* <pre>{JSON.stringify(prosesDonasi, null, 2)}</pre> */}

-        <Radio.Group value={pilihBank} onChange={setPilihBank} withAsterisk>
+        <Radio.Group
+          value={pilihBank}
+          onChange={setPilihBank}
+          withAsterisk
+          color="yellow"
+          
+        >
          {bank.map((e, i) => (
            <Paper
              key={e.id}
-              withBorder
-              radius={"md"}
-              p={"sm"}
-              shadow="lg"
-              mb={"xs"}
+              style={{
+                backgroundColor: AccentColor.blue,
+                border: `2px solid ${AccentColor.darkblue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+                marginBottom: "15px",
+              }}
            >
-              <Radio value={e.id} label={<Title order={6}>{e.name}</Title>} />
+              <Radio
+              styles={{
+                radio: {
+                  color: "yellow"
+                }
+              }}
+                value={e.id}
+                label={
+                  <Title order={6} color="white">
+                    {e.name}
+                  </Title>
+                }
+              />
            </Paper>
          ))}
        </Radio.Group>
@@ -81,8 +107,10 @@ export default function Donasi_MetodePembayaran({
          radius={"xl"}
          onClick={() => {
            onProses();
-
          }}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
        >
          Pilih
        </Button>
--- a/src/app_modules/donasi/proses_donasi/metode_pembayaran/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/metode_pembayaran/layout.tsx
@@ -1,18 +1,17 @@
 "use client"

-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate"
-import ComponentDonasi_HeaderTamplate from "@/app_modules/donasi/component/header_tamplate"
-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"


 export default function LayoutDonasi_MetodePembayaran({children}: {children: React.ReactNode}){
    return<>
-    <AppComponentGlobal_LayoutTamplate
-    header={<ComponentDonasi_HeaderTamplate title="Pilih Metode Pembayaran"/>}
+    <UIGlobal_LayoutTamplate
+    header={<UIGlobal_LayoutHeaderTamplate title="Pilih Metode Pembayaran"/>}
    >
        {children}
-    </AppComponentGlobal_LayoutTamplate>
+    </UIGlobal_LayoutTamplate>
    
    </>
 }
--- a/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
@@ -1,13 +1,9 @@
 "use client";

+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { Warna } from "@/app/lib/warna";
 import {
-  ActionIcon,
-  Avatar,
-  Box,
-  Button,
  Center,
-  CopyButton,
-  Grid,
  Group,
  Loader,
  Paper,
@@ -15,26 +11,27 @@ import {
  Text,
  Title,
 } from "@mantine/core";
-import invoice from "../invoice";
-import { MODEL_DONASI_INVOICE } from "../../model/interface";
-import { useState } from "react";
 import { useInterval, useShallowEffect } from "@mantine/hooks";
-import { redirect, useRouter } from "next/navigation";
-import { Donasi_getOneInvoiceById } from "../../fun/get/get_one_invoice_by_id";
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { useAtom } from "jotai";
-import { gs_donasi_hot_menu } from "../../global_state";
-import moment from "moment";
 import { IconBrandWhatsapp } from "@tabler/icons-react";
-import { Warna } from "@/app/lib/warna";
+import { useAtom } from "jotai";
+import moment from "moment";
 import Link from "next/link";
+import { redirect } from "next/navigation";
+import { useState } from "react";
+import { Donasi_getOneInvoiceById } from "../../fun/get/get_one_invoice_by_id";
+import { gs_donasi_hot_menu } from "../../global_state";
+import { MODEL_DONASI_INVOICE } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";

 export default function Donasi_ProsesTransaksi({
  dataInvoice,
  nomorAdmin,
 }: {
  dataInvoice: MODEL_DONASI_INVOICE;
-  nomorAdmin: any
+  nomorAdmin: any;
 }) {
  const [invoice, setInvoice] = useState(dataInvoice);
  const [hotMenu, setHotMenu] = useAtom(gs_donasi_hot_menu);
@@ -82,14 +79,32 @@ export default function Donasi_ProsesTransaksi({
  return (
    <>
      <Stack>
-        <Paper p={"sm"} withBorder>
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
          <Stack spacing={"md"}>
-            <Paper bg={"gray.1"} p={"sm"} radius={"md"}>
+            <Paper
+              style={{
+                backgroundColor: MainColor.darkblue,
+                border: `2px solid ${AccentColor.darkblue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+              }}
+            >
              <Stack align="center" justify="center">
                <Title order={6}>Admin sedang memproses transaksimu</Title>
                <Paper radius={1000} w={100} h={100}>
                  <Center h={"100%"}>
-                    <Loader size={"lg"} color="orange" variant="bars" />
+                    <Loader size={"lg"} color="yellow" variant="bars" />
                  </Center>
                </Paper>
                <Title order={6}>Mohon menunggu !</Title>
@@ -97,8 +112,26 @@ export default function Donasi_ProsesTransaksi({
            </Paper>
          </Stack>
        </Paper>
-        <Paper p={"sm"} withBorder>
-          <Paper bg={"gray.1"} p={5} radius={"md"}>
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
+          <Paper
+            style={{
+              backgroundColor: AccentColor.darkblue,
+              border: `2px solid ${AccentColor.darkblue}`,
+              padding: "15px",
+              cursor: "pointer",
+              borderRadius: "10px",
+              color: "white",
+            }}
+          >
            <Group position="center">
              <Stack spacing={0}>
                <Text fz={"xs"} fs={"italic"}>
@@ -115,9 +148,7 @@ export default function Donasi_ProsesTransaksi({
                  textDecoration: "none",
                }}
                target="_blank"
-                href={
-                  `https://wa.me/+${nomorAdmin.nomor}?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!`
-                }
+                href={`https://wa.me/+${nomorAdmin.nomor}?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!`}
              >
                <IconBrandWhatsapp size={40} color={Warna.hijau_cerah} />
              </Link>
--- a/src/app_modules/donasi/proses_donasi/proses_transaksi/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/proses_transaksi/layout.tsx
@@ -9,6 +9,8 @@ import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { useAtom } from "jotai";
 import { gs_donasi_hot_menu } from "../../global_state";
 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_ProsesTransaksi({
  children,
@@ -23,21 +25,30 @@ export default function LayoutDonasi_ProsesTransaksi({
  }
  return (
    <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
        header={
-          <Header height={50} sx={{ borderStyle: "none" }}>
-            <Group h={50} position="apart" px={"md"}>
+          <UIGlobal_LayoutHeaderTamplate
+            title="Proses Transaksi"
+            customButtonLeft={
              <ActionIcon variant="transparent" onClick={() => onClick()}>
                <IconX />
              </ActionIcon>
-              <Title order={5}>Proses Transaksi</Title>
-              <ActionIcon disabled variant="transparent"></ActionIcon>
-            </Group>
-          </Header>
+            }
+          />
+
+          // <Header height={50} sx={{ borderStyle: "none" }}>
+          //   <Group h={50} position="apart" px={"md"}>
+          //     <ActionIcon variant="transparent" onClick={() => onClick()}>
+          //       <IconX />
+          //     </ActionIcon>
+          //     <Title order={5}>Proses Transaksi</Title>
+          //     <ActionIcon disabled variant="transparent"></ActionIcon>
+          //   </Group>
+          // </Header>
        }
      >
        {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
    </>
  );
 }