import { Head, router } from "@inertiajs/react"; import { ArrowRight, Check, CheckCircle2, Crown, Gauge, Sparkles, Users, Package, ShoppingCart, MapPinned, } from "lucide-react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import AppLayout from "@/layouts/app-layout"; import { StatChip } from "@/components/crm/global-card"; type Plan = { id: number; name: string; slug: string; monthly_price: string | number; max_users: number | null; max_customers: number | null; max_products: number | null; max_orders_monthly: number | null; max_visits_monthly: number | null; features: string[] | null; }; type Props = { company: any; plans: Plan[]; usage: { users: number; customers: number; products: number; orders_monthly: number; visits_monthly: number; }; limits: { users: number | null; customers: number | null; products: number | null; orders_monthly: number | null; visits_monthly: number | null; }; remaining: { users: number | null; customers: number | null; products: number | null; orders_monthly: number | null; visits_monthly: number | null; }; flash?: { error?: string; success?: string }; }; const money = (v: string | number) => new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR", maximumFractionDigits: 0, }).format(Number(v)); const labels = { users: { label: "Users", icon: Users }, customers: { label: "Customer", icon: Users }, products: { label: "Produk", icon: Package }, orders_monthly: { label: "Order / Bulan", icon: ShoppingCart }, visits_monthly: { label: "Kunjungan / Bulan", icon: MapPinned }, } as const; export default function Subscription({ company, plans, usage, limits, remaining, flash, }: Props) { const current = company.subscription_plan; const request = (id: number) => router.post("/crm/subscription/request-upgrade", { plan_id: id }); return (
{/* Hero Section */}
Enterprise Subscription & Growth Hub

Pilih paket yang mengikuti pertumbuhan bisnis Anda.

Mulai dari kebutuhan operasional saat ini, lalu tingkatkan kapasitas secara seamless ketika tim, customer, produk, dan aktivitas penjualan Anda berkembang pesat.

Paket Aktif Saat Ini
{current?.name ?? "Belum dipilih"}
Status Langganan
{company.subscription_status ?? "-"}
Masa Berlaku
{company.subscription_expires_at ?? "-"}
{/* Flash Messages */} {flash?.error && (
{flash.error}
)} {flash?.success && (
{flash.success}
)} {/* Usage Section menggunakan global-card (StatChip) */}
Usage Overview

Pemakaian Paket & Resource

Pantau batas kapasitas kuota Anda secara real-time sebelum memilih peningkatan paket berikutnya.

Real-time monitoring
{( Object.keys(labels) as Array ).map((key) => { const limit = limits[key]; const used = usage[key]; const percent = limit === null ? 0 : Math.min( 100, limit ? Math.round((used / limit) * 100) : 100, ); const Icon = labels[key].icon; const isHigh = percent >= 80; return ( ); })}
{/* Plans Selection Section */}
Pilihan Tier Paket

Lebih banyak kapasitas, ruang ekspansi tak terbatas.

Bandingkan spesifikasi dan fitur unggulan setiap paket. Anda dapat langsung mengajukan peningkatan plan untuk mengoptimalkan kinerja bisnis Anda.

{plans.map((p) => { const active = current?.id === p.id; return (
SaaS Plan
{p.name}
{money(p.monthly_price)} / bulan
{/* Limits List */}

Batas Resource

{[ ["Users", p.max_users], [ "Customer", p.max_customers, ], ["Produk", p.max_products], [ "Order / bulan", p.max_orders_monthly, ], [ "Kunjungan / bulan", p.max_visits_monthly, ], ].map(([label, value]) => (
{label} {value ?? "Unlimited"}
))}
{/* Features List */} {p.features && p.features.length > 0 && (
Fitur Termasuk
{p.features.map( (feature) => (
{ feature }
), )}
)}
); })}
); }