import { Head, Link, router } from "@inertiajs/react"; import { useState } from "react"; import AppLayout from "@/layouts/app-layout"; import { Card, CardContent, CardHeader, CardTitle, CardDescription, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; 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, Search, Filter, ArrowRight, Users, UserCheck, Package, ChevronRight, } from "lucide-react"; interface Company { id: number; nama: string; kode_perusahaan: string; email: string | null; status: "active" | "trial" | "suspended"; subscription_status: "trial" | "active" | "past_due" | "cancelled"; subscription_expires_at: string | null; subscription_plan?: { id: number; name: string; slug: string; monthly_price: number; } | null; users_count: number; customers_count: number; products_count: number; } interface Plan { id: number; name: string; slug: string; monthly_price: number; } interface Props { companies: { data: Company[]; links: Array<{ url: string | null; label: string; active: boolean }>; }; plans: Plan[]; filters: { search: string; status: string }; summary: { total: number; active: number; trial: number; suspended: number; }; } const money = (value: number) => new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR", maximumFractionDigits: 0, }).format(Number(value) || 0); const getStatusBadge = (status: string) => { switch (status) { case "active": return ( Active ); case "trial": return ( Trial ); default: return ( Suspended ); } }; const getSubBadge = (status: string) => { return ( {status} ); }; export default function Companies({ companies, plans, filters, summary, }: Props) { const [search, setSearch] = useState(filters.search ?? ""); const submit = (event: React.FormEvent) => { event.preventDefault(); router.get( "/platform/companies", { search, status: filters.status || undefined }, { preserveState: true, replace: true }, ); }; const filterStatus = (status: string) => { router.get( "/platform/companies", { search: filters.search || undefined, status: status || undefined, }, { preserveState: true, replace: true }, ); }; return (

{/* Header Section */}

Tenant Management

Manajemen Perusahaan

Kelola seluruh tenant dan organisasi yang menggunakan platform SaaS secara komprehensif.

{/* Metrics Grid using StatChip */}

{/* Filter and Search Bar */}

Filter Status: {[ ["", "Semua"], ["active", "Aktif"], ["trial", "Trial"], ["suspended", "Suspended"], ].map(([value, label]) => ( ))}

{/* Companies Table Card */} Daftar Tenant Manajemen direktori lengkap seluruh perusahaan yang terhubung

Perusahaan Paket Data Platform Status Subscription Aksi {companies.data.map((company) => (

{company.nama}

{ company.kode_perusahaan } · {company.email || "-"}

{company.subscription_plan ?.name || "-"}

{company.subscription_plan ? money( company .subscription_plan .monthly_price, ) + "/bln" : "-"}

{" "} {company.users_count} {" "} { company.customers_count } {" "} {company.products_count}

{getStatusBadge(company.status)}

{getSubBadge( company.subscription_status, )}

{company.subscription_expires_at ? `Exp: ${company.subscription_expires_at}` : "Tanpa tanggal"}

))} {companies.data.length === 0 && ( Tidak ada perusahaan yang ditemukan. )}

{/* Pagination Links */} {companies.links.length > 3 && (

{companies.links.map((link, index) => (

)}

); }