import { Head, router } from "@inertiajs/react"; import AppLayout from "@/layouts/app-layout"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { StatChip } from "@/components/crm/global-card"; import { Users, UserRound, Package, ShoppingCart, MapPin, Activity, Building2, } from "lucide-react"; type Timeline = { label: string; month: string; users: number; customers: number; products: number; orders: number; visits: number; }; type Company = { id: number; nama: string; kode_perusahaan: string; users_count: number; customers_count: number; products_count: number; orders_count: number; visits_count: number; }; export default function Usage({ months, timeline, companies, summary, }: { months: number; timeline: Timeline[]; companies: Company[]; summary: { users: number; customers: number; products: number; orders: number; visits: number; }; }) { return (
{/* Header Section */}
System Utilization & Metrics

Penggunaan Sistem

Pantau aktivitas platform, adopsi fitur, dan volume transaksi berdasarkan periode[cite: 17].

{/* Range Filter Buttons */}
{[3, 6, 12].map((n) => ( ))}
{/* Metrics Grid using StatChip (5 Columns Layout) */}
{/* Timeline Table Card */} Aktivitas Bulanan
{timeline.length === 0 ? ( ) : ( timeline.map((m) => ( )) )}
Periode User Baru Customer Baru Produk Baru Order Visit
Belum ada data aktivitas bulanan.
{m.label} {m.users.toLocaleString( "id-ID", )} {m.customers.toLocaleString( "id-ID", )} {m.products.toLocaleString( "id-ID", )} {m.orders.toLocaleString( "id-ID", )} {m.visits.toLocaleString( "id-ID", )}
{/* Companies Usage Table Card */} Penggunaan per Perusahaan
{companies.length === 0 ? ( ) : ( companies.map((c) => ( )) )}
Perusahaan User Customer Produk Order Visit
Belum ada data perusahaan.
{c.nama}
{c.kode_perusahaan}
{c.users_count.toLocaleString( "id-ID", )} {c.customers_count.toLocaleString( "id-ID", )} {c.products_count.toLocaleString( "id-ID", )} {c.orders_count.toLocaleString( "id-ID", )} {c.visits_count.toLocaleString( "id-ID", )}
); }