Wian Drs
208 lines
8.4 KiB
TypeScript
208 lines
8.4 KiB
TypeScript
import { Head, Link, usePage } from '@inertiajs/react';
|
|
import {
|
|
Building2,
|
|
CheckCircle2,
|
|
KeyRound,
|
|
Network,
|
|
Server,
|
|
ShieldCheck,
|
|
UserCheck,
|
|
Users,
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { dashboard } from '@/routes';
|
|
|
|
type Props = {
|
|
role: 'MASTER ADMIN' | 'TENANT ADMIN' | 'TENANT USER';
|
|
tenant: {
|
|
id: number;
|
|
name: string;
|
|
slug: string;
|
|
is_active: boolean;
|
|
} | null;
|
|
installation?: {
|
|
deployment_type: 'managed_cloud' | 'self_hosted';
|
|
domain: string | null;
|
|
status: string;
|
|
activated_at: string | null;
|
|
} | null;
|
|
license?: {
|
|
plan: string;
|
|
status: string;
|
|
max_devices: number;
|
|
max_users: number;
|
|
expires_at: string | null;
|
|
} | null;
|
|
stats: Record<string, number | boolean>;
|
|
};
|
|
|
|
const roleLabels = {
|
|
'MASTER ADMIN': 'Master Admin Platform',
|
|
'TENANT ADMIN': 'Tenant Admin',
|
|
'TENANT USER': 'Tenant User',
|
|
};
|
|
|
|
export default function Dashboard({
|
|
role,
|
|
tenant,
|
|
installation,
|
|
license,
|
|
stats,
|
|
}: Props) {
|
|
const { auth } = usePage().props;
|
|
const isMaster = role === 'MASTER ADMIN';
|
|
const isTenantAdmin = role === 'TENANT ADMIN';
|
|
const cards = isMaster
|
|
? [
|
|
{ label: 'Total Tenant', value: stats.tenants, icon: Building2 },
|
|
{
|
|
label: 'Tenant Aktif',
|
|
value: stats.activeTenants,
|
|
icon: ShieldCheck,
|
|
},
|
|
{ label: 'User Tenant', value: stats.users, icon: Users },
|
|
{
|
|
label: 'Lisensi Aktif',
|
|
value: stats.activeLicenses,
|
|
icon: KeyRound,
|
|
},
|
|
{
|
|
label: 'Instalasi Terdaftar',
|
|
value: stats.installations,
|
|
icon: Server,
|
|
},
|
|
]
|
|
: [
|
|
{ label: 'Total User', value: stats.users, icon: Users },
|
|
{
|
|
label: 'User Aktif',
|
|
value: stats.activeUsers,
|
|
icon: UserCheck,
|
|
},
|
|
{ label: 'Total Perangkat', value: stats.devices, icon: Network },
|
|
{
|
|
label: 'Status Tenant',
|
|
value: tenant?.is_active ? 'Aktif' : 'Nonaktif',
|
|
icon: CheckCircle2,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Head title="Dashboard" />
|
|
<div className="flex flex-1 flex-col gap-6 p-4 md:p-6">
|
|
<div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
|
|
<div>
|
|
<p className="text-sm font-medium text-primary">
|
|
RADIQ NDM · {roleLabels[role]}
|
|
</p>
|
|
<h1 className="mt-1 text-2xl font-semibold tracking-tight">
|
|
Selamat datang, {auth.user.name}
|
|
</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{isMaster
|
|
? 'Pantau tenant, instalasi, dan lisensi platform.'
|
|
: `${tenant?.name ?? 'Tenant'} · ruang kerja pengelolaan perangkat jaringan.`}
|
|
</p>
|
|
</div>
|
|
{isMaster && (
|
|
<Button asChild>
|
|
<Link href="/administration/tenants">
|
|
Kelola Tenant
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
{isTenantAdmin && tenant && (
|
|
<Button asChild>
|
|
<Link
|
|
href={`/administration/tenants/${tenant.id}/users`}
|
|
>
|
|
Kelola Tenant User
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
|
|
{cards.map((card) => (
|
|
<Card key={card.label}>
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{card.label}
|
|
</CardTitle>
|
|
<card.icon className="size-5 text-primary" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-3xl font-semibold">
|
|
{String(card.value)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>
|
|
{isMaster
|
|
? 'Kontrol Platform'
|
|
: isTenantAdmin
|
|
? 'Pengelolaan Tenant'
|
|
: 'Akses Perangkat'}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-sm text-muted-foreground">
|
|
{isMaster &&
|
|
'Master Admin memiliki kendali tenant dan fondasi lisensi. Aktivasi serta perpanjangan lisensi akan tersedia pada tahap lisensi berikutnya.'}
|
|
{isTenantAdmin &&
|
|
'Anda adalah akun utama tenant. Anda dapat mengelola Tenant User dan nantinya menetapkan aturan penggunaan perangkat untuk mereka.'}
|
|
{role === 'TENANT USER' &&
|
|
(stats.canAddDevice
|
|
? 'Anda diizinkan menambahkan dan mengelola perangkat sesuai kebijakan Tenant Admin. Modul perangkat akan tersedia pada tahap berikutnya.'
|
|
: 'Akses perangkat Anda mengikuti kebijakan yang ditetapkan oleh Tenant Admin.')}
|
|
</CardContent>
|
|
</Card>
|
|
{!isMaster && installation && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Deployment Tenant</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col justify-between gap-4 text-sm md:flex-row md:items-center">
|
|
<div>
|
|
<p className="font-medium">
|
|
{installation.deployment_type ===
|
|
'managed_cloud'
|
|
? 'Cloud RADIQ'
|
|
: 'Self-hosted / Local'}
|
|
</p>
|
|
<p className="mt-1 text-muted-foreground">
|
|
Status: {installation.status}
|
|
{installation.domain
|
|
? ` · ${installation.domain}`
|
|
: ''}
|
|
</p>
|
|
<p className="mt-1 text-muted-foreground">
|
|
Paket: {license?.plan ?? 'belum ada'} ·
|
|
Lisensi {license?.status ?? 'belum aktif'}
|
|
{license?.expires_at &&
|
|
license.plan !== 'cloud_free'
|
|
? ` · sampai ${new Date(license.expires_at).toLocaleDateString('id-ID')}`
|
|
: ''}
|
|
</p>
|
|
</div>
|
|
<Button variant="outline" asChild>
|
|
<Link href="/documentation/deployment">
|
|
Panduan Instalasi & Migrasi
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Dashboard.layout = { breadcrumbs: [{ title: 'Dashboard', href: dashboard() }] };
|