mag/WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nre layouts

Browse Source
This commit is contained in:
Mark Gregory
2026-06-11 17:52:58 +01:00
parent 809e57cc28
commit 254810b90a
4 changed files with 334 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Platform/app/Http/Controllers/PlatformDashboardController.php
+104 -7
View File
@@ -3,6 +3,8 @@
namespace Modules\Platform\app\Http\Controllers; namespace Modules\Platform\app\Http\Controllers;
use App\Http\Controllers\Controller; use App\Http\Controllers\Controller;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Collection;
use Modules\Platform\app\Models\Company; use Modules\Platform\app\Models\Company;
use Modules\Platform\app\Models\LicenseKey; use Modules\Platform\app\Models\LicenseKey;
use Modules\Platform\app\Models\Payment; use Modules\Platform\app\Models\Payment;
@@ -14,17 +16,112 @@ class PlatformDashboardController extends Controller
/** /**
* Show the platform administration dashboard. * Show the platform administration dashboard.
*/ */
public function __invoke() public function __invoke(): View
{ {
$companies = Company::withCount(['users', 'warehouses', 'licenseKeys'])
->latest()
->limit(8)
->get();
$companiesCount = Company::count();
$activeCompaniesCount = Company::where('status', 'active')->count();
$licensesCount = LicenseKey::count();
$warehousesCount = Warehouse::count();
$pricesCount = PlatformPrice::count();
return view('platform::dashboard.index', [ return view('platform::dashboard.index', [
'companiesCount' => Company::count(), 'companiesCount' => $companiesCount,
'activeCompaniesCount' => Company::where('status', 'active')->count(), 'activeCompaniesCount' => $activeCompaniesCount,
'licensesCount' => LicenseKey::count(), 'licensesCount' => $licensesCount,
'paymentsTotal' => Payment::where('status', 'paid')->sum('amount'), 'paymentsTotal' => Payment::where('status', 'paid')->sum('amount'),
'warehousesCount' => Warehouse::count(), 'warehousesCount' => $warehousesCount,
'pricesCount' => PlatformPrice::count(), 'pricesCount' => $pricesCount,
'prices' => PlatformPrice::query()->ordered()->limit(3)->get(), 'prices' => PlatformPrice::query()->ordered()->limit(3)->get(),
'companies' => Company::withCount(['users', 'warehouses', 'licenseKeys'])->latest()->limit(8)->get(), 'companies' => $companies,
'companyUsageChartLabels' => $companies->isNotEmpty()
? $companies->pluck('name')->values()->all()
: ['MPBA', 'Abbott Demo', 'North Hub', 'South Hub'],
'companyUsageChartSeries' => $companies->isNotEmpty()
? $this->companyUsageChartSeries($companies)
: $this->exampleCompanyUsageChartSeries(),
'platformMixChartLabels' => ['Companies', 'Warehouses', 'Prices', 'Licences'],
'platformMixChartValues' => $this->hasPlatformMixData(
$companiesCount,
$warehousesCount,
$pricesCount,
$licensesCount
)
? [$companiesCount, $warehousesCount, $pricesCount, $licensesCount]
: [4, 11, 4, 9],
'companyStatusChartLabels' => ['Active', 'Inactive'],
'companyStatusChartValues' => $companiesCount > 0
? [$activeCompaniesCount, max($companiesCount - $activeCompaniesCount, 0)]
: [3, 1],
]); ]);
} }
/**
* Build the company usage chart series.
*
* @param Collection<int, Company> $companies
* @return array<int, array{label: string, data: array<int, int>}>
*/
private function companyUsageChartSeries(Collection $companies): array
{
return [
[
'label' => 'Users',
'data' => $companies->pluck('users_count')->values()->all(),
],
[
'label' => 'Warehouses',
'data' => $companies->pluck('warehouses_count')->values()->all(),
],
[
'label' => 'Licences',
'data' => $companies->pluck('license_keys_count')->values()->all(),
],
];
}
/**
* Build example company usage chart series for an empty platform.
*
* @return array<int, array{label: string, data: array<int, int>}>
*/
private function exampleCompanyUsageChartSeries(): array
{
return [
[
'label' => 'Users',
'data' => [14, 9, 6, 4],
],
[
'label' => 'Warehouses',
'data' => [5, 3, 2, 1],
],
[
'label' => 'Licences',
'data' => [4, 2, 2, 1],
],
];
}
/**
* Determine whether the platform mix chart has real data.
*/
private function hasPlatformMixData(
int $companiesCount,
int $warehousesCount,
int $pricesCount,
int $licensesCount
): bool {
return ($companiesCount + $warehousesCount + $pricesCount + $licensesCount) > 0;
}
} }
Modules/Platform/resources/views/dashboard/index.blade.php
+127 -79
View File
@@ -3,13 +3,14 @@
<x-wms.page-hero <x-wms.page-hero
eyebrow="Platform" eyebrow="Platform"
title="Platform Dashboard" title="Platform Dashboard"
description="System-level tenant, licensing, warehouse and pricing overview for MPBA administrators." description="System-level tenant, licensing and warehouse overview for MPBA administrators."
:stats="[ :stats="[
['label' => 'Companies', 'value' => $companiesCount, 'icon' => 'fa-solid fa-building'], ['label' => 'Companies', 'value' => $companiesCount, 'icon' => 'fa-solid fa-building'],
['label' => 'Active', 'value' => $activeCompaniesCount, 'icon' => 'fa-solid fa-circle-check'], ['label' => 'Active', 'value' => $activeCompaniesCount, 'icon' => 'fa-solid fa-circle-check'],
['label' => 'Prices', 'value' => $pricesCount, 'icon' => 'fa-solid fa-tags'], ['label' => 'Licences', 'value' => $licensesCount, 'icon' => 'fa-solid fa-key'],
]" ]"
/> />
<section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-5"> <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]) @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"> <article class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
@@ -19,87 +20,131 @@
@endforeach @endforeach
</section> </section>
<section class="rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900"> <section class="grid gap-5 xl:grid-cols-3">
<div class="flex flex-col gap-3 border-b border-zinc-200 p-5 sm:flex-row sm:items-center sm:justify-between dark:border-zinc-800"> <article class="rounded-3xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
<div> <div class="mb-5 flex items-start justify-between gap-4">
<p class="text-xs font-bold uppercase tracking-[0.28em] text-cyan-500">Platform</p> <div>
<h2 class="mt-2 text-xl font-bold text-zinc-900 dark:text-white">Pricing plans</h2> <p class="text-xs font-bold uppercase tracking-[0.28em] text-cyan-500">Tenant usage</p>
<p class="text-sm text-zinc-500">Customer-facing Basic, Advanced and Pro plan cards shown under Platform.</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>
<div class="flex flex-wrap gap-2"> <div class="h-72">
<a href="{{ route('platform.pricing.index') }}" wire:navigate class="rounded-xl border border-zinc-200 px-4 py-2 text-sm font-semibold text-zinc-700 hover:border-cyan-400 hover:text-cyan-700 dark:border-zinc-700 dark:text-zinc-200"> <canvas
View pricing 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>
{{-- Lower Section --}}
<section style="display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 1.25rem; align-items: start;">
{{-- Administration --}}
<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>
<a href="{{ route('platform.prices.index') }}" wire:navigate class="rounded-xl bg-cyan-500 px-4 py-2 text-sm font-bold text-slate-950 hover:bg-cyan-400">
<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 Manage prices
</a> </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> </div>
</div> </article>
<div class="grid gap-5 p-5 lg:grid-cols-3"> {{-- Recent Companies --}}
@forelse ($prices as $price) <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">
@php <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">
$isBasic = $price->code === 'basic'; <div>
$isAdvanced = $price->code === 'advanced'; <p class="text-xs font-bold uppercase tracking-[0.28em] text-cyan-500">Companies</p>
$headerClass = $isAdvanced <h2 class="mt-2 text-xl font-bold text-zinc-900 dark:text-white">Recent companies</h2>
? 'from-cyan-500 to-blue-600' <p class="text-sm text-zinc-500 dark:text-zinc-400">
: ($isBasic ? 'from-slate-700 to-slate-950' : 'from-indigo-600 to-violet-700'); Tenant isolation is enforced by company ownership on every warehouse record.
$features = array_slice($price->featureRows(), 0, 3); </p>
@endphp </div>
<article class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-950"> <a
<div class="bg-gradient-to-br {{ $headerClass }} p-5 text-white"> href="{{ route('platform.companies.index') }}"
<div class="flex items-start justify-between gap-4"> wire:navigate
<div> 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"
<p class="text-xs font-bold uppercase tracking-[0.24em] text-white/70">{{ $price->badge_label ?: 'Plan' }}</p> >
<h3 class="mt-2 text-2xl font-black tracking-tight">{{ $price->name }}</h3> <i class="fa-solid fa-building-circle-arrow-right" aria-hidden="true"></i>
</div> Manage Companies
<span class="grid h-11 w-11 place-items-center rounded-2xl bg-white/15 text-lg backdrop-blur"> </a>
<i class="fa-solid {{ $isBasic ? 'fa-box' : ($isAdvanced ? 'fa-layer-group' : 'fa-crown') }}" aria-hidden="true"></i>
</span>
</div>
<p class="mt-3 text-sm leading-6 text-white/80">{{ $price->strapline }}</p>
</div>
<div class="p-5">
<div class="flex items-end gap-2">
<span class="text-3xl font-black tracking-tight text-zinc-950 dark:text-white">{{ $price->formatAmount($price->monthly_amount) }}</span>
<span class="pb-1 text-xs font-semibold text-zinc-500">/ month</span>
</div>
<p class="mt-3 line-clamp-2 text-sm leading-6 text-zinc-600 dark:text-zinc-300">{{ $price->description }}</p>
<ul class="mt-4 space-y-2 text-sm text-zinc-700 dark:text-zinc-200">
@foreach ($features as $feature)
<li class="flex gap-3">
<i class="fa-solid fa-check mt-1 text-cyan-500" aria-hidden="true"></i>
<span>{{ $feature }}</span>
</li>
@endforeach
</ul>
</div>
</article>
@empty
<article class="rounded-2xl border border-dashed border-zinc-300 p-6 text-sm text-zinc-500 dark:border-zinc-700 lg:col-span-3">
No platform pricing plans have been published yet.
</article>
@endforelse
</div>
</section>
<section class="rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
<div class="flex flex-col gap-3 border-b border-zinc-200 p-5 sm:flex-row sm:items-center sm:justify-between dark:border-zinc-800">
<div>
<h2 class="text-lg font-semibold text-zinc-900 dark:text-white">Recent companies</h2>
<p class="text-sm text-zinc-500">Tenant isolation is enforced by company ownership on every warehouse record.</p>
</div> </div>
<a href="{{ route('platform.companies.index') }}" wire:navigate class="rounded-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white dark:bg-white dark:text-zinc-900">
Manage companies <div class="overflow-x-auto">
</a> <table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-800">
</div> <thead class="bg-zinc-50 dark:bg-zinc-950">
<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> <tr>
<th class="px-5 py-3 text-left font-semibold">Company</th> <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">Users</th>
@@ -107,8 +152,9 @@
<th class="px-5 py-3 text-left font-semibold">Licences</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> <th class="px-5 py-3 text-left font-semibold">Status</th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
<tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
@foreach ($companies as $company) @foreach ($companies as $company)
<tr> <tr>
<td class="px-5 py-4 font-medium">{{ $company->name }}</td> <td class="px-5 py-4 font-medium">{{ $company->name }}</td>
@@ -118,9 +164,11 @@
<td class="px-5 py-4">{{ $company->is_system_company ? 'System' : ucfirst($company->status) }}</td> <td class="px-5 py-4">{{ $company->is_system_company ? 'System' : ucfirst($company->status) }}</td>
</tr> </tr>
@endforeach @endforeach
</tbody> </tbody>
</table> </table>
</div> </div>
</article>
</section> </section>
</div> </div>
</x-layouts::app> </x-layouts::app>
composer.json
+9
View File
@@ -96,6 +96,15 @@
"npm install", "npm install",
"npm run build" "npm run build"
], ],
"rebuild": [
"npm run build",
"@php artisan optimize:clear",
"@php artisan octane:reload"
],
"dev": [ "dev": [
"Composer\\Config::disableProcessTimeout", "Composer\\Config::disableProcessTimeout",
"npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve --host=localhost\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite --kill-others" "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve --host=localhost\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite --kill-others"
resources/js/app.js
+94
View File
@@ -1 +1,95 @@
import '@fortawesome/fontawesome-free/css/all.min.css'; import '@fortawesome/fontawesome-free/css/all.min.css';
import Chart from 'chart.js/auto';
const chartColours = [
'rgb(8, 145, 178)',
'rgb(37, 99, 235)',
'rgb(79, 70, 229)',
'rgb(14, 116, 144)',
];
function parseJsonAttribute(element, attribute, fallback = []) {
try {
return JSON.parse(element.getAttribute(attribute) || JSON.stringify(fallback));
} catch (error) {
return fallback;
}
}
function renderWmsCharts() {
document.querySelectorAll('[data-wms-chart]').forEach((canvas) => {
if (canvas.dataset.rendered === 'true') {
return;
}
const type = canvas.getAttribute('data-wms-chart');
const labels = parseJsonAttribute(canvas, 'data-labels');
const series = parseJsonAttribute(canvas, 'data-series');
const values = parseJsonAttribute(canvas, 'data-values');
const datasets = series.length
? series.map((item, index) => ({
label: item.label,
data: item.data,
backgroundColor: chartColours[index % chartColours.length],
borderColor: chartColours[index % chartColours.length],
borderWidth: 2,
borderRadius: 8,
}))
: [{
label: 'Total',
data: values,
backgroundColor: chartColours,
borderColor: 'rgb(255, 255, 255)',
borderWidth: 2,
}];
new Chart(canvas, {
type,
data: {
labels,
datasets,
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: document.documentElement.classList.contains('dark') ? '#e4e4e7' : '#3f3f46',
boxWidth: 12,
boxHeight: 12,
},
},
},
scales: type === 'doughnut'
? {}
: {
x: {
ticks: {
color: document.documentElement.classList.contains('dark') ? '#d4d4d8' : '#52525b',
},
grid: {
color: 'rgba(113, 113, 122, 0.18)',
},
},
y: {
beginAtZero: true,
ticks: {
precision: 0,
color: document.documentElement.classList.contains('dark') ? '#d4d4d8' : '#52525b',
},
grid: {
color: 'rgba(113, 113, 122, 0.18)',
},
},
},
},
});
canvas.dataset.rendered = 'true';
});
}
document.addEventListener('DOMContentLoaded', renderWmsCharts);
document.addEventListener('livewire:navigated', renderWmsCharts);