initial commit

components/Transaction/index.js

@@ -0,0 +1,70 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {Badge, Divider, Tag} from "antd";
+import Image from "next/image";
+import {DownCircleOutlined} from "@ant-design/icons";
+import autoAnimate from "@formkit/auto-animate";
+import { format } from "date-fns";
+
+const Transaction = ({show, orderData, location}) => {
+    const [collapse, setCollapse] = useState(false);
+    const parentRef = useRef(null)
+
+    useEffect(() => {
+        if (parentRef.current) {
+            autoAnimate(parentRef.current);
+        }
+    }, [parentRef])
+
+    return (
+        <>
+            <div className={`${show ? 'block' : 'hidden'} bg-white mt-3 border-[#E5E9F2] shadow rounded-lg`} ref={parentRef}>
+                <div className={'flex justify-between items-center p-3'}>
+                    <div className={'flex flex-col'}>
+                        <span className={'font-semibold'}>{orderData?.order_id}</span>
+                        <span className={'text-[#B7BAC2]'}>{format(new Date(orderData?.date_modified), 'dd/MM/yyyy mm:ss')}</span>
+                    </div>
+
+                    <div>
+                        <Tag color={'warning'} className={'p-2 rounded'}>{orderData?.status}</Tag>
+                    </div>
+                </div>
+
+                {!collapse && <Divider className={'m-0'}/>}
+
+                {collapse && (
+                    <>
+                        <div className={'flex justify-between gap-2 bg-slate-50 border-2 border-x'}>
+                            <div className={'flex flex-col pl-3 py-3 gap-2'}>
+                                <div className={'flex flex-col'}>
+                                    <span className={'font-semibold'}>Lokasi</span>
+                                    <span className={'text-[#515257]'}>{location?.data?.[0]?.name}</span>
+                                </div>
+                                <div className={'flex flex-col'}>
+                                    <span className={'font-semibold'}>Total Harga</span>
+                                    <span className={'text-[#FF6103]'}>Rp.{orderData?.total}</span>
+                                </div>
+                                {orderData?.payment_method?.toLowerCase() == "gopay" && (
+                                    <div>
+                                        <Image src={'/assets/images/gopay.svg'} width={81} height={17}/>
+                                    </div>
+                                )}
+                            </div>
+
+                            <div className={'flex flex-col items-center w-44 pr-3 py-3'}>
+                                <span className={'font-semibold'}>Status Parkir</span>
+                                <Badge color={'#FF9400'} text={<span className={'text-[#FF9400]'}>In-Location</span>}/>
+                            </div>
+                        </div>
+                    </>
+                )}
+
+                <div className={'flex items-center gap-2 hover:cursor-pointer p-3'} onClick={() => setCollapse(!collapse)}>
+                    <span className={'text-[#96969a] text-sm'}>Lihat Detail</span>
+                    <DownCircleOutlined rotate={collapse ? 180 : 0} className={'text-[#96969a]'}/>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Transaction;