Wian Drs
105 lines
4.3 KiB
TypeScript
105 lines
4.3 KiB
TypeScript
import { Form, Head } from '@inertiajs/react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
type Order = {
|
|
id: number;
|
|
uuid: string;
|
|
plan_code: string;
|
|
gateway: string;
|
|
status: string;
|
|
total: number;
|
|
currency: string;
|
|
created_at: string;
|
|
tenant: { name: string };
|
|
};
|
|
|
|
export default function BillingOrders({
|
|
orders,
|
|
}: {
|
|
orders: { data: Order[] };
|
|
}) {
|
|
return (
|
|
<>
|
|
<Head title="Order Lisensi" />
|
|
<div className="flex flex-1 flex-col gap-6 p-4 md:p-6">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold">Order Lisensi</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Verifikasi pembayaran manual dan pantau checkout seluruh
|
|
tenant.
|
|
</p>
|
|
</div>
|
|
<div className="overflow-x-auto rounded-xl border">
|
|
<table className="w-full min-w-[760px] text-sm">
|
|
<thead className="bg-muted/50 text-left">
|
|
<tr>
|
|
{[
|
|
'Tenant',
|
|
'Paket',
|
|
'Gateway',
|
|
'Total',
|
|
'Status',
|
|
'Dibuat',
|
|
'Aksi',
|
|
].map((item) => (
|
|
<th key={item} className="px-4 py-3">
|
|
{item}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{orders.data.map((order) => (
|
|
<tr key={order.uuid} className="border-t">
|
|
<td className="px-4 py-3 font-medium">
|
|
{order.tenant.name}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{order.plan_code}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{order.gateway}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{new Intl.NumberFormat('id-ID', {
|
|
style: 'currency',
|
|
currency: order.currency,
|
|
maximumFractionDigits: 0,
|
|
}).format(order.total)}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{order.status}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{new Date(
|
|
order.created_at,
|
|
).toLocaleString('id-ID')}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{order.status === 'pending' && (
|
|
<Form
|
|
action={`/administration/billing-orders/${order.id}/approve`}
|
|
method="patch"
|
|
>
|
|
<Button size="sm">
|
|
Konfirmasi Bayar
|
|
</Button>
|
|
</Form>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
BillingOrders.layout = {
|
|
breadcrumbs: [
|
|
{ title: 'Order Lisensi', href: '/administration/billing-orders' },
|
|
],
|
|
};
|