import MemberLayout from '@/layouts/MemberLayout';
import { Invoice, Member, Vehicle, Voucher } from '@/types';
import { useState } from 'react';
import { Ticket } from 'lucide-react';
import { Link } from '@inertiajs/react';
import { sign_out } from '@/actions/App/Http/Controllers/MembershipController';
interface Props {
member: Member;
}
export default function MemberPage({ member }: Props) {
const NAVIGATIONS = [
{ label: "My Invoices", index: 0 },
{ label: "My Vouchers", index: 1 },
{ label: "My Vehicle", index: 2 },
];
const [tab, setTab] = useState(0);
function handleTabChange(index: number) {
setTab(index);
}
return (
}
tab_bar={}
>
{tab === 0 && (
{member.invoices?.map((invoice: Invoice) => (
))}
)}
{tab === 1 && (
{member
.vouchers?.filter((voucher: Voucher) => voucher.voucher_component === 'voucher-cashback')
.map((voucher: Voucher) => (
))}
{member
.vouchers?.filter((voucher: Voucher) => voucher.voucher_component === 'voucher-discount')
.map((voucher: Voucher) => (
))}
)
}
{tab === 2 && (
{member.vehicles?.map((vehicle: Vehicle) => (
))}
)
}
);
}
function VehicleItem({ vehicle }: { vehicle: Vehicle }) {
return (
{vehicle.brand} - {vehicle.type}
{vehicle.plate_number}
);
}
function VoucherCashbackCard({ voucher }: { voucher: Voucher }) {
return (
Voucher Code
{voucher.voucher_code}
Valid until: {voucher.voucher_expire_at}
{voucher.voucher_qty - voucher.voucher_redeem_count} / {voucher.voucher_qty}x
{voucher.voucher_name}
Cashback
{voucher.voucher_cashback}
);
}
function VoucherDiscountCard({ voucher }: { voucher: Voucher }) {
return (
Voucher Code
{voucher.voucher_code}
Valid until: {voucher.voucher_expire_at}
{voucher.voucher_qty - voucher.voucher_redeem_count} / {voucher.voucher_qty}x
{voucher.voucher_name}
Discount
{voucher.voucher_discount} %
Max: Rp. {voucher.voucher_max_cashback}
);
}
function InvoiceCard({ invoice }: { invoice: Invoice }) {
const [showInvoiceDetail, setShowInvoiceDetail] = useState(false);
function handleInvoiceClick() {
setShowInvoiceDetail(!showInvoiceDetail);
}
return (<>
E-Invoice SCT - {invoice.sellout_number}
Invoice Items
{invoice.items.map((item: any, index: number) => (
))}
Invoice Detail
Outlet
{(invoice.outlet_name + ' - ' + invoice.region_name)}
Tanggal transaksi
{invoice.sellout_date}
Nomor transaksi
{invoice.sellout_number}
Total transaksi
{invoice.grand_total}
Metode pembayaran
{invoice.payment_method}
Nama pelanggan
{invoice.customer_name}
Nomor telepon
{invoice.customer_phone}
Merek kendaraan
{invoice.vehicle_brand_name}
Tipe kendaraan
{invoice.vehicle_type_name}
Nomor kendaraan
{invoice.vehicle_plate_number}
);
}
function TabItem({ menuName, isActive, onClick }: { menuName: string, isActive: boolean, onClick: () => void }) {
return (
);
}
function HeaderMember({ member, contentTitle }: { member: Member, contentTitle: string }) {
const logoImageSrc = "https://static.wixstatic.com/media/80e941_ff223148ff3a4b76b489debeaa79189d~mv2.png/v1/crop/x_0,y_730,w_7087,h_3457/fill/w_450,h_210,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Logo%20SCT%20Motodetailing%20Red.png";
return (
Sign Out
Welcome {member.customer_name}
{contentTitle}
);
}
function TabBar({ onChange, tab, navigations }: { onChange: (index: number) => void, tab: number, navigations: { label: string, index: number }[] }) {
return (
{navigations.map((navigation: { label: string, index: number }) => (
onChange(navigation.index)} />
))}
);
}