Wian Drs
@@ -0,0 +1,247 @@
|
||||
import { Form, Head, Link } from '@inertiajs/react';
|
||||
import { CheckCircle2, Clock3, CreditCard, Server } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
|
||||
type Plan = {
|
||||
code: string;
|
||||
name: string;
|
||||
deployment: string;
|
||||
price: number;
|
||||
max_devices: number;
|
||||
max_users: number;
|
||||
};
|
||||
type License = {
|
||||
plan: string;
|
||||
status: string;
|
||||
max_devices: number | null;
|
||||
max_users: number | null;
|
||||
expires_at: string | null;
|
||||
grace_until: string | null;
|
||||
};
|
||||
type Order = {
|
||||
uuid: string;
|
||||
plan_code: string;
|
||||
gateway: string;
|
||||
status: string;
|
||||
total: number;
|
||||
currency: string;
|
||||
checkout_url: string | null;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
const money = (value: number) =>
|
||||
new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
|
||||
export default function BillingIndex({
|
||||
installation,
|
||||
license,
|
||||
plans,
|
||||
orders,
|
||||
gateways,
|
||||
pendingOrder,
|
||||
}: {
|
||||
installation: { deployment_type: string; status: string };
|
||||
license: License | null;
|
||||
plans: Plan[];
|
||||
orders: Order[];
|
||||
gateways: string[];
|
||||
pendingOrder: Pick<Order, 'uuid' | 'plan_code' | 'total' | 'currency'> | null;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Head title="Lisensi & Tagihan" />
|
||||
<div className="flex flex-1 flex-col gap-6 p-4 md:p-6">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-primary">
|
||||
RADIQ NDM · BILLING
|
||||
</p>
|
||||
<h1 className="mt-1 text-2xl font-semibold">
|
||||
Lisensi & Tagihan
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Pilih paket, checkout, dan pantau masa berlaku lisensi
|
||||
tenant.
|
||||
</p>
|
||||
</div>
|
||||
{pendingOrder && (
|
||||
<Card className="border-amber-400">
|
||||
<CardContent className="flex flex-col justify-between gap-3 pt-6 md:flex-row md:items-center">
|
||||
<div>
|
||||
<p className="font-semibold">Pembayaran masih pending</p>
|
||||
<p className="text-sm text-muted-foreground">{pendingOrder.plan_code} · {money(pendingOrder.total)}. Selesaikan order ini sebelum membuat perpanjangan baru.</p>
|
||||
</div>
|
||||
<Button asChild><Link href={`/checkout/${pendingOrder.uuid}`}>Lanjutkan Pembayaran</Link></Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">
|
||||
Paket aktif
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-xl font-semibold">
|
||||
{license?.plan ?? 'Belum aktif'}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
Status {license?.status ?? installation.status}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">
|
||||
Batas perangkat
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-xl font-semibold">
|
||||
{license?.max_devices ?? '—'}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">
|
||||
Berlaku sampai
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-xl font-semibold">
|
||||
{license?.plan === 'cloud_free'
|
||||
? 'Selama paket tersedia'
|
||||
: license?.expires_at
|
||||
? new Date(
|
||||
license.expires_at,
|
||||
).toLocaleDateString('id-ID')
|
||||
: '—'}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<section>
|
||||
<h2 className="text-lg font-semibold">
|
||||
Pilih paket bulanan
|
||||
</h2>
|
||||
<div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{plans.map((plan) => (
|
||||
<Card
|
||||
key={plan.code}
|
||||
className={
|
||||
license?.plan === plan.code
|
||||
? 'border-primary'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>{plan.name}</CardTitle>
|
||||
{license?.plan === plan.code && (
|
||||
<CheckCircle2 className="size-5 text-emerald-500" />
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-2xl font-bold">
|
||||
{plan.price === 0
|
||||
? 'Gratis'
|
||||
: money(plan.price)}
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
{plan.price > 0 && '/bulan'}
|
||||
</span>
|
||||
</p>
|
||||
<ul className="mt-4 space-y-2 text-sm text-muted-foreground">
|
||||
<li>✓ {plan.max_devices} perangkat</li>
|
||||
<li>
|
||||
✓ {plan.max_users} user aplikasi
|
||||
</li>
|
||||
<li>✓ Users Perangkat tanpa batas</li>
|
||||
</ul>
|
||||
{plan.price > 0 && (
|
||||
<Form
|
||||
action="/billing/checkout"
|
||||
method="post"
|
||||
className="mt-5"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="plan_code"
|
||||
value={plan.code}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="gateway"
|
||||
value={gateways[0] ?? 'manual'}
|
||||
/>
|
||||
<Button className="w-full" disabled={Boolean(pendingOrder)}>
|
||||
<CreditCard className="size-4" />{' '}
|
||||
Checkout / Perpanjang
|
||||
</Button>
|
||||
</Form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Riwayat checkout</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{orders.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Belum ada checkout.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{orders.map((order) => (
|
||||
<div
|
||||
key={order.uuid}
|
||||
className="flex flex-col justify-between gap-2 rounded-lg border p-3 text-sm md:flex-row md:items-center"
|
||||
>
|
||||
<div>
|
||||
<p className="font-medium">
|
||||
{order.plan_code} ·{' '}
|
||||
{money(order.total)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{new Date(
|
||||
order.created_at,
|
||||
).toLocaleString('id-ID')}{' '}
|
||||
· {order.gateway}
|
||||
</p>
|
||||
</div>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Clock3 className="size-4" />
|
||||
{order.status}
|
||||
</span>
|
||||
{order.status === 'pending' && (
|
||||
<Button asChild size="sm" variant="outline"><Link href={`/checkout/${order.uuid}`}>Lanjutkan</Link></Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="rounded-xl border bg-muted/40 p-4 text-sm text-muted-foreground">
|
||||
<Server className="mr-2 inline size-4" />
|
||||
Checkout berada di Tenant Admin. Payment gateway dapat
|
||||
diganti tanpa mengubah data order atau proses lisensi.
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
BillingIndex.layout = {
|
||||
breadcrumbs: [{ title: 'Lisensi & Tagihan', href: '/billing' }],
|
||||
};
|
||||
Reference in New Issue
Block a user