initial commit

pages/[qrCode]/order/index.js

@@ -0,0 +1,65 @@
+import React, {useEffect} from 'react';
+import DefaultLayout from "../../../components/Layout/DefaultLayout";
+import { useRouter } from 'next/router';
+import { Image } from 'antd';
+import { botsRepository } from '../../../repository/bots';
+import {useStore} from "../../../components/StoreProvider";
+import { observer } from 'mobx-react-lite';
+
+const FlashScreen = observer(() => {
+    const router = useRouter();
+    const store = useStore()
+
+    const { qrCode } = router.query;
+
+    const { data: listLockeys } = botsRepository.hooks.useGetAllLockey(qrCode);
+
+    useEffect(() => {
+        if (router.isReady && listLockeys?.data?.length > 0) {
+            const isAvailable = listLockeys?.data?.find(lockey => lockey.lockey_status?.description.toLowerCase() === "tersedia");
+            const isNotAvailable = listLockeys?.data?.find(lockey => lockey?.lockey_status?.description?.toLowerCase() === "LOCKEY Mati");
+
+            if (isAvailable) {
+                localStorage.setItem("lockey_id", isAvailable?.id)
+                localStorage.setItem("location_name", isAvailable?.location_name);
+                store.lockey.createOrder({
+                    lockeyId: isAvailable.id
+                })
+                    .then(res => {
+                        router.push(`/${qrCode}/payment-order/`)
+                    })
+            } else if (isNotAvailable) {
+                localStorage.setItem("lockey_id", isNotAvailable?.id)
+                localStorage.setItem("location_name", isNotAvailable?.location_name);
+                router.push('/not-available');
+            }
+            console.log(isAvailable, "jj")
+        }
+    }, [router.isReady, listLockeys])
+
+    return (
+        <>
+            <div className='relative flex flex-col justify-center items-center pt-[172px] lg:pt-20'>
+                <Image src='/assets/images/cariparkir3.svg' preview={false} />
+                <div className='flex items-center gap-6 mt-6'>
+                    <span>Only pay with</span>
+                    <Image src='/assets/images/gopay.svg' preview={false}/>
+                </div>
+            </div>
+            <div className={'hidden md:flex justify-center items-center absolute bottom-0 w-full'}>
+                <Image src='/assets/images/flash-screen2.png' preview={false}/>
+            </div>
+            <div className={'flex justify-center items-center absolute bottom-0 w-full md:hidden'}>
+                <Image src='/assets/images/flash-screen.svg' preview={false}/>
+            </div>
+        </>
+    )
+})
+
+FlashScreen.getLayout = function Layout(page) {
+    return <DefaultLayout isGradient={false}>
+        {page}
+    </DefaultLayout>;
+};
+
+export default FlashScreen;

pages/[qrCode]/payment-order/index.js

@@ -0,0 +1,200 @@
+import React, {useEffect, useState} from 'react';
+import DefaultLayout from "../../../components/Layout/DefaultLayout";
+import {observer} from "mobx-react-lite";
+import Image from "next/image";
+import {Button, Divider, Form, Input, Modal, Spin} from "antd";
+import Constraint from "../../../components/Constraint";
+import Ask from "../../../components/Ask";
+import Location from "../../../components/Location";
+import DownloadApps from "../../../components/DownloadApps";
+import Sheet from 'react-modal-sheet';
+import Countdown from "react-countdown";
+import {useRouter} from "next/router";
+import BottomSheet from "../../../components/BottomSheet";
+import { botsRepository } from '../../../repository/bots';
+
+const Payment = observer(() => {
+    const [form] = Form.useForm();
+    const router = useRouter();
+    const { qrCode } = router.query;
+    const [open, setOpen] = useState(false);
+    const [openOrderOut, setOpenOrderOut] = useState(false);
+    const [notOrder, setNotOrder] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isNotComplete, setIsNotComplete] = useState(false);
+
+    const onOpenSheet = () => setOpen(true);
+    const onCloseSheet = () => setOpen(false);
+    const onNotOrder = () => {
+        setNotOrder(true);
+        setOpenOrderOut(false);
+    };
+
+    const { data: location } = botsRepository.hooks.useGetLocationByQR(qrCode)
+    console.log(location, "he")
+    const renderer = ({minutes, seconds, completed}) => {
+        if (completed) {
+            // router.push('/flash-screen');
+        } else {
+            return <span>{minutes}:{seconds}</span>;
+        }
+    };
+
+    return (
+        <>
+            {isNotComplete ? (
+                <div className="flex items-center justify-center bg-[#FF4F34] h-10 text-base">
+                    <span className={'text-white'}>Batas Penyelesaian Pesanan mu Habis</span>
+                </div>
+            ) : (
+                <div className="flex items-center justify-center bg-[#00AED6] h-10 text-base">
+                    <span className={'text-white'}>Selesaikan Pesanan mu dalam <Countdown
+                        date={Date.now() + 50000}
+                        // date={Date.now() + 300000}
+                        renderer={renderer}
+                        onComplete={() => {
+                            setIsNotComplete(true)
+                            setOpenOrderOut(true)
+                        }}/>
+                    </span>
+                </div>
+            )}
+
+            <div className={'bg-white m-2 py-4 px-6 rounded-lg'}>
+                <Location/>
+
+                <Form form={form} layout={'vertical'}>
+                    <div className={'mt-5'}>
+                        <Form.Item name="phone"
+                                   label={<span className={'font-semibold text-xl'}>Nomor Telepon Pembayaran</span>}
+                                   rules={[
+                                       {required: true, message: "Silahkan masukan Nomor Ponsel!"},
+                                       {min: 10, max: 14, message: "Nomor Ponsel tidak sesuai!"},
+                                   ]}>
+                            <Input
+                                type={'number'}
+                                className={'rounded-lg'}
+                                size={'large'}
+                                suffix={<Image src={'/assets/icons/gopay.svg'} width={80} height={30} />}
+                                placeholder={'08xxxxxxxxx'}
+                                disabled={
+                                    notOrder === true
+                                }/>
+                        </Form.Item>
+
+                        <p>Dengan melanjutkan, saya telah membaca dan menyetujui <span
+                            className={'text-[#FF9400] underline underline-offset-2 hover:cursor-pointer'}
+                            onClick={() => router.push('/policy-terms')}>Syarat & Ketentuan</span> di
+                            CariParkir.</p>
+
+                        <Divider dashed className={'my-8 border-[#c1c1c1]'} style={{width: '2px 0 0'}}/>
+                    </div>
+
+                    <div className={'flex justify-between'}>
+                        <h3 className={'text-lg font-bold'}>Total Pembayaran</h3>
+                        <h3 className={'text-lg font-bold text-[#FF6103]'}>Rp. 99.000</h3>
+                    </div>
+
+                    <Form.Item shouldUpdate>
+                        {() => (
+                            <Button
+                                disabled={
+                                    !form.isFieldsTouched(true) ||
+                                    !!form.getFieldsError().filter(({ errors }) => errors.length).length ||
+                                    notOrder === true
+                                }
+                                block
+                                className={`${!form.isFieldsTouched(true) ||
+                                !!form.getFieldsError().filter(({errors}) => errors.length).length || openOrderOut === true ? 'bg-[#919191]' : 'bg-black'} 
+                                text-white text-xl h-12 rounded-lg`}
+                                onClick={onOpenSheet}>Bayar</Button>
+                        )}
+                    </Form.Item>
+                </Form>
+            </div>
+
+            {/*ADA KENDALA*/}
+            <Constraint
+                location={location}
+            />
+
+            {/*BUTUH BANTUAN*/}
+            <Ask/>
+
+            {/*DOWNLOAD APPS*/}
+            <DownloadApps/>
+
+            {/*MODAL LOADING*/}
+            <Modal
+                className={'rounded-lg'}
+                open={isLoading}
+                footer={null}
+                closable={false}
+                maskClosable={false}
+                bodyStyle={{paddingLeft: 5, paddingRight: 5}}>
+                <div className={'flex flex-col justify-center'}>
+                    <Spin size={'large'}/>
+                    <span className={'text-center font-semibold'}>Mohon tunggu</span>
+                    <span className={'text-center text-sm'}>Saat ini pemesanan LOCKEY anda sedang di proses. </span>
+                </div>
+            </Modal>
+
+            {/*CONFIRMATION SHEET*/}
+            <BottomSheet onOpen={open} onClose={() => setOpen(false)}>
+                <div className={'px-5 max-w-lg'}>
+                    <div className={'flex justify-center'}>
+                        <Image src={'/assets/images/confirmation.svg'} width={200} height={200}
+                               alt={'confirmation'}/>
+                    </div>
+
+                    <h3 className={'text-lg font-bold'}>Konfirmasi Pembayaran?</h3>
+                    <p>Tidak berlaku pembatalan atau pengembalian dana setelah pembayaran selesai. </p>
+
+                    <div className={'flex justify-between gap-4'}>
+                        <Button size={'large'} className={'w-full rounded-lg'}
+                                onClick={onCloseSheet}>Cancel</Button>
+                        <Button size={'large'} className={'w-full rounded-lg bg-black text-white'}
+                                onClick={() => {
+                                    setOpen(false)
+                                    setIsLoading(true)
+                                }}>Bayar</Button>
+                    </div>
+                </div>
+            </BottomSheet>
+
+            {/*ORDER OUT*/}
+            <BottomSheet onOpen={openOrderOut} onClose={() => setOpenOrderOut(false)}>
+                <div className={'px-5 max-w-lg'}>
+                    <div className={'flex justify-center'}>
+                        <Image src={'/assets/images/illustration-order-out.svg'} width={200} height={200}
+                               alt={'confirmation'}/>
+                    </div>
+
+                    <h3 className={'text-lg font-bold'}>Ingin pesan kembali?</h3>
+                    <p>Anda akan mendapatkan LOCKEY terbaru, jika ingin memesan kembali.</p>
+
+                    <div className={'flex justify-between gap-4'}>
+                        <Button size={'large'} className={'w-full rounded-lg'}
+                            onClick={onNotOrder}>Tidak</Button>
+                        <Button
+                            size={'large'}
+                            className={'w-full rounded-lg bg-black text-white'}
+                            onClick={() => router.push(`/${qrCode}/order`)}
+                        >
+                            Pesan Ulang
+                        </Button>
+                    </div>
+                </div>
+            </BottomSheet>
+        </>
+    )
+})
+
+Payment.getLayout = function Layout(page) {
+    return <DefaultLayout isGradient={true}>
+        {page}
+    </DefaultLayout>;
+}
+;
+
+export default Payment;

pages/_app.js

@@ -0,0 +1,14 @@
+import '../styles/globals.scss';
+import 'tailwindcss/tailwind.css';
+import {StoreProvider} from "../components/StoreProvider";
+
+function MyApp({ Component, pageProps }) {
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout || ((page) => page)
+
+  return getLayout(<StoreProvider {...pageProps}>
+    <Component {...pageProps} />
+  </StoreProvider>);
+}
+
+export default MyApp

pages/_document.js

@@ -0,0 +1,27 @@
+import Document, {Head, Html, Main, NextScript} from 'next/document'
+
+class MyDocument extends Document {
+    static async getInitialProps(ctx) {
+        const initialProps = await Document.getInitialProps(ctx)
+        return { ...initialProps }
+    }
+
+    render() {
+        return (
+            <Html>
+                <Head>
+                    <link
+                        href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;400;600"
+                        rel="stylesheet"
+                    />
+                </Head>
+                <body id={"tailwind-selector"}>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        )
+    }
+}
+
+export default MyDocument

pages/about.js

@@ -0,0 +1,32 @@
+import React from "react";
+import DefaultLayout from "../components/Layout/DefaultLayout";
+import {Button, Card, PageHeader} from "antd";
+import {observer} from "mobx-react-lite";
+import {useStore} from "../components/StoreProvider";
+
+const About = observer(() => {
+    const store = useStore();
+
+    return <div>
+        <PageHeader
+            style={{
+            }}
+            title={"About"}
+        >
+        </PageHeader>
+        <Card className={"flex text-gray-500"}>
+            {store.sample.testObs} Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut recusandae velit! Consequatur corporis, eum fuga, harum incidunt laboriosam minus necessitatibus neque non nostrum pariatur tempore. Dignissimos impedit rem tempora!
+            <Button onClick={() => {
+                store.sample.setTestObs(store.sample.testObs + 1);
+            }}>Increment</Button>
+        </Card>
+    </div>
+});
+
+About.getLayout = function Layout(page) {
+    return <DefaultLayout>
+        {page}
+    </DefaultLayout>;
+};
+
+export default About;

pages/api/hello.js

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}

pages/home.js

@@ -0,0 +1,31 @@
+import React from "react";
+import DefaultLayout from "../components/Layout/DefaultLayout";
+import {Button, Card, PageHeader} from "antd";
+import {observer} from "mobx-react-lite";
+import {useStore} from "../components/StoreProvider";
+
+const Home = observer(() => {
+    const store = useStore();
+    return <div>
+        <PageHeader
+            style={{
+            }}
+            title={"Home"}
+        >
+        </PageHeader>
+        <Card className={"flex text-gray-500"}>
+            {store.sample.testObs} Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut recusandae velit! Consequatur corporis, eum fuga, harum incidunt laboriosam minus necessitatibus neque non nostrum pariatur tempore. Dignissimos impedit rem tempora!
+            <Button onClick={() => {
+                store.sample.setTestObs(store.sample.testObs + 1);
+            }}>Increment</Button>
+        </Card>
+    </div>
+});
+
+Home.getLayout = function Layout(page) {
+    return <DefaultLayout>
+        {page}
+    </DefaultLayout>;
+};
+
+export default Home;

pages/index.js

@@ -0,0 +1,5 @@
+export default function Home() {
+  return (
+      <div></div>
+  )
+}

pages/login.js

@@ -0,0 +1,146 @@
+import React, {useState} from "react";
+import {observer} from 'mobx-react-lite';
+import {Button, Card, Checkbox, Col, Form, Input, Row, Typography} from 'antd';
+import {LockOutlined, UserOutlined} from '@ant-design/icons';
+import ParticlesLayout from "../components/Layout/ParticlesLayout";
+
+const Login = observer(() => {
+    // const store = useStore();
+    const [loading, setLoading] = useState(false);
+
+    // let history = useHistory();
+
+    const onFinish = values => {
+        console.log('Received values of form: ', values);
+        enterLoading(values).then(res => {
+            console.log(res, "awasaa");
+        }).catch((error) => {
+            console.log({error}, "awasaa error");
+        });
+    };
+
+    const enterLoading = async (props) => {
+        // store.setInitialToken("ayayay", "clap");
+        // return history.push("/app/page_example_1");
+    };
+
+    return <div style={{width: '100vw', display: 'flex', justifyContent: 'center'}}>
+        <Row justify={'center'}>
+            <Col>
+                <div style={{
+                    display: 'flex',
+                    justifyContent: 'flex-start',
+                    marginTop: '5vh',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                }}>
+                    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'stretch'}}>
+                        <Typography.Paragraph
+                            style={{
+                                margin: 0,
+                                padding: 0,
+                                fontSize: 20,
+                                marginLeft: 5,
+                                fontWeight: 600,
+                                color: "#413d3e",
+                            }}
+                        >
+                            Boilerplate
+                        </Typography.Paragraph>
+                    </div>
+                    <Card
+                        style={{width: 320, textAlign: 'center'}}
+                        headStyle={{fontSize: 13, fontWeight: 200}}
+                        className={"shadow"}
+                        bordered={true}
+                        title={'Sign in to your account'}
+                    >
+                        <Form
+                            layout={'vertical'}
+                            name="normal_login"
+                            className="login-form"
+                            onFinish={onFinish}
+                        >
+                            <Form.Item
+                                label="Email"
+                                name="email"
+                                size={'large'}
+                                rules={[{required: false, message: 'Please input your Username!'}]}
+                            >
+                                <Input
+                                    prefix={<UserOutlined className="site-form-item-icon"/>}
+                                    type="text"
+                                    placeholder="Email"/>
+                            </Form.Item>
+
+                            <Form.Item
+                                style={{
+                                    marginBottom: 0,
+                                }}
+                                label="Password"
+                                name="password"
+                                size={'large'}
+                                rules={[{required: false, message: 'Please input your Password!'}]}
+                            >
+                                <Input.Password
+                                    prefix={<LockOutlined className="site-form-item-icon"/>}
+                                    type="password"
+                                    placeholder="Password"
+                                />
+                            </Form.Item>
+                            <Form.Item
+                                style={{
+                                    marginTop: 0,
+                                    marginBottom: 20,
+                                    padding: 0
+                                }}
+                                // label="Password"
+                                name="forgot-password"
+                                size={'small'}
+                                rules={[{required: false, message: 'Please input your Password!'}]}
+                            >
+                                <a className="login-form-forgot" href="">
+                                    Forgot password
+                                </a>
+                            </Form.Item>
+
+                            <Form.Item
+                                style={{
+                                    marginBottom: 5,
+                                    textAlign: 'left'
+                                }}>
+                                <Form.Item name="remember" valuePropName="checked" noStyle>
+                                    <Checkbox>Remember me</Checkbox>
+                                </Form.Item>
+                            </Form.Item>
+
+                            <Form.Item
+                                style={{
+                                    marginBottom: 0,
+                                }}>
+                                <Button type="primary"
+                                        block
+                                        loading={loading}
+                                        htmlType="submit"
+                                        size={'large'}
+                                        onSubmit={enterLoading}
+                                        className="login-form-button">
+                                    Sign In
+                                </Button>
+                            </Form.Item>
+                        </Form>
+                    </Card>
+                </div>
+            </Col>
+        </Row>
+
+    </div>;
+});
+
+Login.getLayout = function Layout(page) {
+    return <ParticlesLayout>
+        {page}
+    </ParticlesLayout>;
+};
+
+export default Login;

pages/not-available/index.js

@@ -0,0 +1,37 @@
+const { observer } = require("mobx-react-lite");
+import { Button, Image } from "antd";
+import DefaultLayout from "../../components/Layout/DefaultLayout";
+
+const NotAvailable = observer(() => {
+
+    const navigateDownload = () => {
+        if (navigator.userAgent.toLocaleLowerCase().indexOf("iphone") > -1) {
+            window.open("https://apps.apple.com/id/app/cariparkir-consumer-app/id1327224621", "_blank");
+        } else {
+            window.open("https://play.google.com/store/apps/details?id=id.sevadigital.cariparkir.consumer&hl=en&gl=US", "_blank");
+        }
+    }
+
+    return (
+        <>
+            <div className="mx-auto flex flex-col">
+                <div className="mt-9">
+                    <p className={'text-[#FFB500] font-bold text-2xl lg:text-3xl text-center'}>Pesan LOCKEY</p>
+                    <p className={'font-bold text-xl lg:text-2xl text-center mt-4'}>"Lippo Mall Kemang"</p>
+                </div>
+                <Image src={'/assets/backgrounds/not_available.svg'} preview={false} />
+                <div className="mx-auto px-4 text-center mb-3 mt-4 sm:px-16">
+                    <p className={'font-bold text-base md:text-lg lg:text-xl mb-3'}>Maaf, saat ini LOCKEY sudah terpesan semua.</p>
+                    <p className="font-normal text-base md:text-lg lg:text-xl mb-4">Silahkan mencoba beberapa saat lagi. Atau install aplikasi CariParkir untuk pesan LOCKEY lebih mudah dan dapatkan penawaran menarik lainnya!</p>
+                    <Button type="primary" className="bg-[#231F20] text-base md:text-lg lg:text-xl font-normal border-none h-[45px] rounded-3xl w-full mt-10 mb-10" onClick={navigateDownload}>Download Cariparkir</Button>
+                </div>
+            </div>
+        </>
+    )
+})
+NotAvailable.getLayout = function Layout(page) {
+    return <DefaultLayout>
+        {page}
+    </DefaultLayout>;
+}
+export default NotAvailable;

pages/policy-terms/index.js

@@ -0,0 +1,109 @@
+import { observer } from "mobx-react-lite";
+import DefaultLayout from "../../components/Layout/DefaultLayout";
+import { Image, Tabs } from "antd";
+import { useRouter } from "next/router";
+
+const PolicyTerms = observer(() => {
+
+    const router = useRouter();
+
+    const general_requirements = [
+        {
+            key: 1,
+            value: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since ',
+        },
+        {
+            key: 2,
+            value: 'bled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop',
+        },
+        {
+            key: 3,
+            value: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since ',
+        },
+        {
+            key: 4,
+            value: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since ',
+        },
+        {
+            key: 5,
+            value: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since ',
+        },
+        {
+            key: 6,
+            value: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since ',
+        },
+    ]
+    const items = [
+        {
+            label: `Syarat & Ketentuan`,
+            key: '1',
+            children: [
+                <p className="font-bold text-xs md:text-sm lg:text-base text-center mb-2" > Syarat - syarat & Ketentuan[Layanan] <i> (Terms & Condition of Serfices)</i></p>,
+                <p className="font-bold text-xs md:text-base mb-7">PENTING: <span className="font-normal text-xs md:text-sm">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</span></p>,
+                <p className="font-normal text-xs md:text-sm mb-7">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>,
+                <p className="font-normal text-xs md:text-sm mb-7">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>,
+                <p className="font-bold text-xs md:text-base">Ketentuan Umum</p>,
+                general_requirements.map(value => (
+                    <div className="flex">
+                        <p key={value?.key} className="font-normal text-xs md:text-sm mb-0">{value?.key}.</p>
+                        <p key={value?.key} className="font-normal text-xs md:text-sm mb-0">{value?.value}</p>
+                    </div>
+                ))
+            ],
+        },
+        {
+            label: `Kebijakan Privasi`,
+            key: '2',
+            children: [
+                <p className="font-bold text-xs md:text-sm lg:text-base text-center mb-2" > Kebijakan Privasi <i> (Privacy Policy)</i></p>,
+                <p className="font-bold text-xs md:text-base mb-7">PENTING: <span className="font-normal text-xs md:text-sm">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</span></p>,
+                <p className="font-normal text-xs md:text-sm mb-7">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>,
+                <p className="font-normal text-xs md:text-sm mb-7">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>,
+                <p className="font-bold text-xs md:text-base">Ketentuan Umum</p>,
+                general_requirements.map(value => (
+                    <div className="flex">
+                        <p key={value?.key} className="font-normal text-xs md:text-sm mb-0">{value?.key}.</p>
+                        <p key={value?.key} className="font-normal text-xs md:text-sm mb-0">{value?.value}</p>
+                    </div>
+                ))
+            ],
+        },
+    ];
+
+    return (
+        <>
+            <div>
+                <div className="grid grid-cols-3 items-center bg-[#FF9400] w-full h-16 px-6 lg:px-10">
+                    <div
+                        className={'cursor-pointer'}
+                        onClick={() => router.back()}>
+                        <Image
+                            src={'/assets/icons/arrow-left.svg'}
+                            preview={false}
+                        />
+                    </div>
+                    <div className={'col-span-2 lg:ml-10'}>
+                        <Image
+                            src={'/assets/images/cariparkir2.svg'}
+                            preview={false} />
+                    </div>
+                </div>
+
+                <div className="px-4">
+                    <Tabs
+                        defaultActiveKey="1"
+                        centered={true}
+                        items={items}
+                    />
+                </div>
+            </div>
+        </>
+    )
+})
+PolicyTerms.getLayout = function Layout(page) {
+    return <DefaultLayout>
+        {page}
+    </DefaultLayout>;
+}
+
+export default PolicyTerms;

pages/setting.js

@@ -0,0 +1,25 @@
+import React from "react";
+import DefaultLayout from "../components/Layout/DefaultLayout";
+import {Card, PageHeader} from "antd";
+
+const Setting = () => {
+    return <div>
+        <PageHeader
+            style={{
+            }}
+            title={"Setting"}
+        >
+        </PageHeader>
+        <Card className={"flex text-gray-500"}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut recusandae velit! Consequatur corporis, eum fuga, harum incidunt laboriosam minus necessitatibus neque non nostrum pariatur tempore. Dignissimos impedit rem tempora!
+        </Card>
+    </div>
+}
+
+Setting.getLayout = function Layout(page) {
+    return <DefaultLayout>
+        {page}
+    </DefaultLayout>;
+};
+
+export default Setting;

pages/success-payment/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import {Button, Image} from "antd";
+import DefaultLayout from "../../components/Layout/DefaultLayout";
+import {useRouter} from "next/router";
+
+const SuccessPayment = () => {
+    const router = useRouter();
+
+    return (
+        <div className={'bg-white min-h-screen'}>
+            <div className="grid grid-cols-3 items-center bg-[#FF9400] w-full h-16 px-6 lg:px-10">
+                <div
+                    className={'cursor-pointer'}
+                    onClick={() => router.back()}>
+                    <Image
+                        src={'/assets/icons/arrow-left.svg'}
+                        preview={false}
+                    />
+                </div>
+                <div className={'col-span-2 lg:ml-10'}>
+                    <Image
+                        src={'/assets/images/cariparkir2.svg'}
+                        preview={false}/>
+                </div>
+            </div>
+
+            <div className={'flex flex-col items-center gap-6'}>
+                <Image src={'/assets/images/hand-tree.png'} alt={'success'} preview={false}/>
+
+                <div className={'flex flex-col text-center'}>
+                    <span className={'font-bold text-2xl'}>Selamat!</span>
+                    <span className={'text-xl'}>Pembayaran LOCKEY Berhasil</span>
+                </div>
+
+                <div className={'flex flex-col text-center'}>
+                    <span className={'font-bold text-xl'}>Lippo Mall Kemang</span>
+                    <span className={'text-[#FF6103] font-bold text-xl'}>GROUNDFLOOR - 05</span>
+                </div>
+
+                <div className={'w-4/5 p-4 bg-white border-2 border-slate-200 rounded-lg mt-5'}>
+                    <div className={'flex flex-col justify-center gap-4'}>
+                        <div className={'flex flex-col'}>
+                            <span className={'text-[#B7BAC2]'}>Waktu Kedatangan</span>
+                            <div className={'flex flex-row items-center gap-2'}>
+                                <Image src={'/assets/icons/clock.svg'} preview={false}/>
+                                <span className={'text-[#0A7BC0] font-semibold'}>Pukul 13:33 - 14:33</span>
+                            </div>
+                        </div>
+
+                        <div className={'flex flex-col'}>
+                            <span className={'text-[#B7BAC2]'}>Total Biaya Parkir</span>
+                            <div className={'flex flex-row items-center gap-2'}>
+                                <Image src={'/assets/icons/money.svg'} preview={false}/>
+                                <span className={'text-[#FF6103]'}>Rp 99.000</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <Button size={'large'}
+                        className={'w-4/5 h-[41px] bg-black text-white mt-10 rounded-lg'}>Lanjutkan</Button>
+            </div>
+        </div>
+    )
+}
+
+SuccessPayment.getLayout = function Layout(page) {
+    return <DefaultLayout>
+        {page}
+    </DefaultLayout>;
+};
+
+export default SuccessPayment;