Add Proses Transaksi, Metode Pembayaran, Invoice
This commit is contained in:
150
src/app_modules/event/detail/invoice/index.tsx
Normal file
150
src/app_modules/event/detail/invoice/index.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
'use client';
|
||||
import { AccentColor, MainColor } from '@/app_modules/_global/color';
|
||||
import { ActionIcon, Button, Grid, Group, Paper, Stack, Text, Title } from '@mantine/core';
|
||||
import { IconCamera } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
function Event_Invoice() {
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
<Text fw={"bold"}>NicoArya</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<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 BRI</Text>
|
||||
<Text>PT. Himpunan Pengusaha Badung</Text>
|
||||
</Stack>
|
||||
<Paper
|
||||
style={{
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.darkblue}`,
|
||||
padding: "15px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "10px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Col span={8}>
|
||||
<Group position='left' align='center' h={"100%"}>
|
||||
<Title order={4} color={MainColor.yellow}>
|
||||
9065456754325643
|
||||
</Title>
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<Group position='right'>
|
||||
<Button radius={"xl"}
|
||||
style={{ backgroundColor: MainColor.yellow }}
|
||||
c={MainColor.darkblue}>
|
||||
Salin
|
||||
</Button>
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<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
|
||||
style={{
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.darkblue}`,
|
||||
padding: "15px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "10px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Col span={8}>
|
||||
<Group position='left' align='center' h={"100%"}>
|
||||
<Title order={4} color={MainColor.yellow}>
|
||||
Rp. 100.000
|
||||
</Title>
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<Group position='right'>
|
||||
<Button radius={"xl"} style={{ backgroundColor: MainColor.yellow }} c={MainColor.darkblue}>
|
||||
Salin
|
||||
</Button>
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Paper
|
||||
style={{
|
||||
backgroundColor: AccentColor.blue,
|
||||
border: `2px solid ${AccentColor.darkblue}`,
|
||||
padding: "15px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "10px",
|
||||
color: "white",
|
||||
marginBottom: "15px",
|
||||
}}
|
||||
>
|
||||
<Stack spacing={"sm"}>
|
||||
<Group position='center'>
|
||||
<Button leftIcon={<IconCamera />} radius={"xl"} style={{ backgroundColor: MainColor.yellow }} c={MainColor.darkblue}>
|
||||
Upload
|
||||
</Button>
|
||||
</Group>
|
||||
<Text ta={"center"} fz={"xs"} fs={"italic"}>Upload bukti transfer anda</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
<Button radius={"xl"} bg={MainColor.yellow} color='yellow' c="black">
|
||||
Saya Sudah Transfer
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Event_Invoice;
|
||||
Reference in New Issue
Block a user