import { Head } from "@inertiajs/react"; import AppLayout from "@/layouts/app-layout"; import { Card, CardContent, CardHeader, CardTitle, CardDescription, } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { StatChip } from "@/components/crm/global-card"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Building2, CheckCircle2, Clock, AlertTriangle, BadgePercent, CreditCard, ArrowUpRight, Users, Package, ArrowRight, Sparkles, } from "lucide-react"; type Plan = { id: number; name: string; slug: string; monthly_price: number; companies_count: number; }; type Expiry = { id: number; nama: string; kode_perusahaan: string; subscription_status: string; subscription_expires_at: string; subscription_plan?: { name: string }; }; type Invoice = { id: number; invoice_number: string; amount: number; status: string; issued_at: string; paid_at: string | null; perusahaan?: { nama: string; kode_perusahaan: string }; subscription_plan?: { name: string }; }; type Upgrade = { id: number; nama: string; kode_perusahaan: string; requested_plan: string; requested_at: string | null; }; type Props = { metrics: Record; plans: Plan[]; upcomingExpiry: Expiry[]; recentInvoices: Invoice[]; upgradeRequests: Upgrade[]; }; const money = (value: number) => new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR", maximumFractionDigits: 0, }).format(value || 0); const date = (value: string | null) => value ? new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format( new Date(value), ) : "-"; export default function PlatformDashboard({ metrics, plans, upcomingExpiry, recentInvoices, upgradeRequests, }: Props) { return (
{/* Header Section */}
SaaS Administration

Platform Dashboard

Ringkasan seluruh tenant, metrik performa, dan pendapatan berlangganan SaaS secara real-time.

{/* Metrics Grid using StatChip */}
{/* Distribution & Expiry Section */}
Distribusi Paket Persebaran jumlah tenant berdasarkan paket langganan {plans.map((plan) => (
{plan.name}
{money(Number(plan.monthly_price))}{" "} / bulan
{plan.companies_count}{" "} tenant
))} Subscription Akan Expired Daftar tenant yang masa aktifnya habis dalam 30 hari {upcomingExpiry.length === 0 ? (
Tidak ada subscription yang expired dalam 30 hari.
) : (
{upcomingExpiry.map((c) => (
{c.nama}
{c.subscription_plan ?.name ?? "-"} ยท {c.subscription_status}
{date( c.subscription_expires_at, )}
))}
)}
{/* Upgrade Requests & Platform Data */}
Upgrade Request Permintaan peningkatan paket dari tenant {upgradeRequests.length === 0 ? (
Belum ada permintaan upgrade.
) : (
{upgradeRequests.map((item) => (
{item.nama}
{item.kode_perusahaan}
{item.requested_plan}
Diminta pada:{" "} {date(item.requested_at)}
))}
)} Data Platform Keseluruhan Akumulasi entitas aktif dalam ekosistem
{metrics.total_users ?? 0}
Users
{metrics.total_customers ?? 0}
Customers
{metrics.total_products ?? 0}
Products
{/* Recent Subscription Invoices Table */} Invoice Subscription Terbaru Riwayat transaksi tagihan langganan tenant platform
Invoice Company Plan Amount Status Paid At {recentInvoices.map((invoice) => ( {invoice.invoice_number} {invoice.perusahaan?.nama ?? "-"} {invoice.subscription_plan ?.name ?? "-"} {money(Number(invoice.amount))} {invoice.status} {date(invoice.paid_at)} ))} {recentInvoices.length === 0 && ( Belum ada invoice subscription. )}
); }