248 lines
14 KiB
PHP
248 lines
14 KiB
PHP
<x-layouts::app :title="__('Platform')">
|
|
<div class="space-y-6">
|
|
<x-wms.page-hero
|
|
eyebrow="Platform"
|
|
title="Platform Dashboard"
|
|
description="System-level tenant, licensing and warehouse overview for MPBA administrators."
|
|
:stats="[
|
|
['label' => 'Companies', 'value' => $companiesCount, 'icon' => 'fa-solid fa-building'],
|
|
['label' => 'Active', 'value' => $activeCompaniesCount, 'icon' => 'fa-solid fa-circle-check'],
|
|
['label' => 'Licences', 'value' => $licensesCount, 'icon' => 'fa-solid fa-key'],
|
|
]"
|
|
/>
|
|
|
|
<section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
|
|
@foreach ([['Companies', $companiesCount], ['Active', $activeCompaniesCount], ['Warehouses', $warehousesCount], ['Prices', $pricesCount], ['Licences', $licensesCount]] as [$label, $value])
|
|
<article class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
|
|
<p class="text-sm text-zinc-500 dark:text-zinc-400">{{ $label }}</p>
|
|
<p class="mt-2 text-3xl font-bold text-zinc-900 dark:text-white">{{ $value }}</p>
|
|
</article>
|
|
@endforeach
|
|
</section>
|
|
|
|
<section class="grid gap-5 xl:grid-cols-3">
|
|
<article class="rounded-3xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
|
|
<div class="mb-5 flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="text-xs font-bold uppercase tracking-[0.28em] text-cyan-500">Tenant usage</p>
|
|
<h2 class="mt-2 text-xl font-bold text-zinc-900 dark:text-white">Company capacity</h2>
|
|
<p class="text-sm text-zinc-500">Users, warehouses and licences.</p>
|
|
</div>
|
|
|
|
<span class="grid h-11 w-11 place-items-center rounded-2xl bg-cyan-500/10 text-cyan-500">
|
|
<i class="fa-solid fa-chart-column" aria-hidden="true"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="h-72">
|
|
<canvas
|
|
data-wms-chart="bar"
|
|
data-labels='@json($companyUsageChartLabels)'
|
|
data-series='@json($companyUsageChartSeries)'
|
|
></canvas>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="rounded-3xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
|
|
<div class="mb-5 flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="text-xs font-bold uppercase tracking-[0.28em] text-cyan-500">Platform mix</p>
|
|
<h2 class="mt-2 text-xl font-bold text-zinc-900 dark:text-white">System totals</h2>
|
|
<p class="text-sm text-zinc-500">Tenant, warehouse and licence footprint.</p>
|
|
</div>
|
|
|
|
<span class="grid h-11 w-11 place-items-center rounded-2xl bg-cyan-500/10 text-cyan-500">
|
|
<i class="fa-solid fa-chart-pie" aria-hidden="true"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="h-72">
|
|
<canvas
|
|
data-wms-chart="doughnut"
|
|
data-labels='@json($platformMixChartLabels)'
|
|
data-values='@json($platformMixChartValues)'
|
|
></canvas>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="rounded-3xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
|
|
<div class="mb-5 flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="text-xs font-bold uppercase tracking-[0.28em] text-cyan-500">Company status</p>
|
|
<h2 class="mt-2 text-xl font-bold text-zinc-900 dark:text-white">Active split</h2>
|
|
<p class="text-sm text-zinc-500">Active against inactive tenants.</p>
|
|
</div>
|
|
|
|
<span class="grid h-11 w-11 place-items-center rounded-2xl bg-cyan-500/10 text-cyan-500">
|
|
<i class="fa-solid fa-circle-half-stroke" aria-hidden="true"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="h-72">
|
|
<canvas
|
|
data-wms-chart="doughnut"
|
|
data-labels='@json($companyStatusChartLabels)'
|
|
data-values='@json($companyStatusChartValues)'
|
|
></canvas>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="rounded-3xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
|
|
<div class="mb-5 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<p class="text-xs font-bold uppercase tracking-[0.28em] text-cyan-500">Pricing</p>
|
|
|
|
<h2 class="mt-2 text-xl font-bold text-zinc-900 dark:text-white">
|
|
Pricing plans
|
|
</h2>
|
|
|
|
<p class="text-sm text-zinc-500 dark:text-zinc-400">
|
|
Current platform pricing tiers and administration shortcuts.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<a
|
|
href="{{ route('platform.pricing.index') }}"
|
|
wire:navigate
|
|
class="inline-flex h-10 items-center justify-center gap-2 rounded-xl border border-zinc-200 px-4 text-sm font-bold text-zinc-700 hover:border-cyan-400 hover:text-cyan-700 dark:border-zinc-700 dark:text-zinc-200"
|
|
>
|
|
<i class="fa-solid fa-credit-card" aria-hidden="true"></i>
|
|
View pricing
|
|
</a>
|
|
|
|
<a
|
|
href="{{ route('platform.prices.index') }}"
|
|
wire:navigate
|
|
class="inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-cyan-600 px-4 text-sm font-bold text-white shadow-sm shadow-cyan-600/20 ring-1 ring-cyan-500/30 transition hover:bg-cyan-500"
|
|
>
|
|
<i class="fa-solid fa-tags" aria-hidden="true"></i>
|
|
Manage prices
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
@foreach ($prices as $price)
|
|
<article class="rounded-2xl border border-zinc-200 p-5 dark:border-zinc-800">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h3 class="text-lg font-bold text-zinc-900 dark:text-white">
|
|
{{ $price->name }}
|
|
</h3>
|
|
|
|
<p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
|
|
{{ $price->strapline }}
|
|
</p>
|
|
</div>
|
|
|
|
@if ($price->badge_label)
|
|
<span class="rounded-full bg-cyan-500/10 px-3 py-1 text-xs font-bold uppercase tracking-wide text-cyan-600 dark:text-cyan-400">
|
|
{{ $price->badge_label }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
<p class="mt-4 text-2xl font-black text-zinc-900 dark:text-white">
|
|
£{{ number_format($price->monthly_amount / 100, 0) }}
|
|
<span class="text-sm font-semibold text-zinc-500">/ month</span>
|
|
</p>
|
|
|
|
@if (! empty($price->features))
|
|
<ul class="mt-4 space-y-2 text-sm text-zinc-600 dark:text-zinc-300">
|
|
@foreach (array_slice($price->features, 0, 3) as $feature)
|
|
<li class="flex gap-2">
|
|
<i class="fa-solid fa-check mt-1 text-cyan-500" aria-hidden="true"></i>
|
|
<span>{{ $feature }}</span>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
@endif
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
|
|
<article class="rounded-3xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
|
|
<div class="mb-5 flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="text-xs font-bold uppercase tracking-[0.28em] text-cyan-500">Administration</p>
|
|
<h2 class="mt-2 text-xl font-bold text-zinc-900 dark:text-white">Control centre</h2>
|
|
<p class="text-sm text-zinc-500">MPBA administrator shortcuts.</p>
|
|
</div>
|
|
|
|
<span class="grid h-11 w-11 place-items-center rounded-2xl bg-cyan-500/10 text-cyan-500">
|
|
<i class="fa-solid fa-sliders" aria-hidden="true"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="grid gap-3">
|
|
<a href="{{ route('platform.companies.index') }}" wire:navigate class="rounded-2xl border border-zinc-200 p-4 text-sm font-semibold text-zinc-700 hover:border-cyan-400 hover:text-cyan-700 dark:border-zinc-700 dark:text-zinc-200">
|
|
<i class="fa-solid fa-building mr-2 text-cyan-500" aria-hidden="true"></i>
|
|
Manage companies
|
|
</a>
|
|
|
|
<a href="{{ route('platform.prices.index') }}" wire:navigate class="rounded-2xl border border-zinc-200 p-4 text-sm font-semibold text-zinc-700 hover:border-cyan-400 hover:text-cyan-700 dark:border-zinc-700 dark:text-zinc-200">
|
|
<i class="fa-solid fa-tags mr-2 text-cyan-500" aria-hidden="true"></i>
|
|
Manage prices
|
|
</a>
|
|
|
|
<a href="{{ route('platform.pricing.index') }}" wire:navigate class="rounded-2xl border border-zinc-200 p-4 text-sm font-semibold text-zinc-700 hover:border-cyan-400 hover:text-cyan-700 dark:border-zinc-700 dark:text-zinc-200">
|
|
<i class="fa-solid fa-credit-card mr-2 text-cyan-500" aria-hidden="true"></i>
|
|
View public pricing
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="min-w-0 overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
|
|
<div class="flex flex-col gap-4 border-b border-zinc-200 p-5 sm:flex-row sm:items-start sm:justify-between dark:border-zinc-800">
|
|
<div>
|
|
<p class="text-xs font-bold uppercase tracking-[0.28em] text-cyan-500">Companies</p>
|
|
<h2 class="mt-2 text-xl font-bold text-zinc-900 dark:text-white">Recent companies</h2>
|
|
<p class="text-sm text-zinc-500 dark:text-zinc-400">
|
|
Tenant isolation is enforced by company ownership on every warehouse record.
|
|
</p>
|
|
</div>
|
|
|
|
<a
|
|
href="{{ route('platform.companies.index') }}"
|
|
wire:navigate
|
|
class="inline-flex h-10 shrink-0 items-center justify-center gap-2 rounded-xl bg-cyan-600 px-6 text-sm font-bold text-white shadow-sm shadow-cyan-600/20 ring-1 ring-cyan-500/30 transition hover:bg-cyan-500"
|
|
>
|
|
<i class="fa-solid fa-building-circle-arrow-right" aria-hidden="true"></i>
|
|
Manage Companies
|
|
</a>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-800">
|
|
<thead class="bg-zinc-50 dark:bg-zinc-950">
|
|
<tr>
|
|
<th class="px-5 py-3 text-left font-semibold">Company</th>
|
|
<th class="px-5 py-3 text-left font-semibold">Users</th>
|
|
<th class="px-5 py-3 text-left font-semibold">Warehouses</th>
|
|
<th class="px-5 py-3 text-left font-semibold">Licences</th>
|
|
<th class="px-5 py-3 text-left font-semibold">Status</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
|
|
@foreach ($companies as $company)
|
|
<tr>
|
|
<td class="px-5 py-4 font-medium">{{ $company->name }}</td>
|
|
<td class="px-5 py-4">{{ $company->users_count }}</td>
|
|
<td class="px-5 py-4">{{ $company->warehouses_count }}</td>
|
|
<td class="px-5 py-4">{{ $company->license_keys_count }}</td>
|
|
<td class="px-5 py-4">{{ $company->is_system_company ? 'System' : ucfirst($company->status) }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
</x-layouts::app>
|