From 071a11bf130d975160c32f11ac6fb5e8b028aa07 Mon Sep 17 00:00:00 2001 From: Mark Gregory Date: Thu, 11 Jun 2026 10:27:18 +0100 Subject: [PATCH] new gui layout --- resources/css/app.css | 256 +++++++++--------- .../views/components/wms/page-hero.blade.php | 32 +++ resources/views/layouts/app/sidebar.blade.php | 131 +++++---- storage/framework/cache/.gitkeep | 0 storage/framework/cache/data/.gitkeep | 0 storage/framework/views/.gitkeep | 0 .../3d7c4a50df1d313410bd5444267891cf.php | 133 ++++----- .../3feb8572f4b247ceb864938a4490c071.php | 66 +++++ .../986fb95c0ca2c23afb55cc89b1b07e48.php | 88 ++++++ 9 files changed, 454 insertions(+), 252 deletions(-) create mode 100644 resources/views/components/wms/page-hero.blade.php create mode 100644 storage/framework/cache/.gitkeep create mode 100644 storage/framework/cache/data/.gitkeep create mode 100644 storage/framework/views/.gitkeep create mode 100755 storage/framework/views/3feb8572f4b247ceb864938a4490c071.php create mode 100755 storage/framework/views/986fb95c0ca2c23afb55cc89b1b07e48.php diff --git a/resources/css/app.css b/resources/css/app.css index 9d0c79ca..41c6867d 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -389,6 +389,101 @@ select:focus[data-flux-control] { padding: 1.5rem; } + .wms-main-panel { + min-width: 0; + flex: 1; + display: flex; + min-height: 100vh; + flex-direction: column; + } + + .wms-page-hero { + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; + margin-bottom: 1.75rem; + border-radius: 1.35rem; + padding: 3rem 3.25rem; + background: + radial-gradient(circle at 95% 85%, rgb(8 145 178 / 0.62), transparent 36%), + linear-gradient(135deg, rgb(4 8 24), rgb(10 18 42) 54%, rgb(7 44 58)); + color: white; + box-shadow: 0 24px 60px rgb(0 0 0 / 0.30); + } + + .wms-page-hero-copy { + min-width: 0; + max-width: 58rem; + } + + .wms-page-hero-kicker { + margin-bottom: 1rem; + color: rgb(103 232 249); + font-size: 0.9rem; + font-weight: 900; + letter-spacing: 0.42em; + } + + .wms-page-hero-title { + margin: 0; + font-size: clamp(2.5rem, 5vw, 4.7rem); + font-weight: 900; + line-height: 0.98; + letter-spacing: -0.06em; + } + + .wms-page-hero-description { + max-width: 52rem; + margin-top: 1.2rem; + color: rgb(203 213 225); + font-size: clamp(1rem, 1.55vw, 1.45rem); + line-height: 1.45; + } + + .wms-page-hero-actions { + display: flex; + align-items: stretch; + gap: 1rem; + flex: 0 0 auto; + } + + .wms-page-hero-stat { + display: grid; + min-width: 13.75rem; + gap: 1rem; + border-radius: 1.2rem; + background: rgb(51 65 85 / 0.72); + padding: 1.45rem 1.6rem; + color: rgb(203 213 225); + backdrop-filter: blur(10px); + } + + .wms-page-hero-stat strong { + display: flex; + align-items: center; + gap: 0.75rem; + color: white; + font-size: 2rem; + font-weight: 900; + line-height: 1; + } + + .wms-page-hero-stat strong i { + color: rgb(74 222 128); + } + + .wms-hero-mobile-menu { + display: none; + width: 3rem; + height: 3rem; + place-items: center; + align-self: flex-start; + border-radius: 0.85rem; + background: rgb(255 255 255 / 0.12); + color: white; + } + .wms-mobile-header { display: none; } @@ -438,12 +533,12 @@ select:focus[data-flux-control] { justify-items: center; } - html[data-wms-sidebar='collapsed'] .wms-toggle-expanded { + html[data-wms-sidebar='collapsed'] .wms-sidebar-toggle { display: none; } - html[data-wms-sidebar='collapsed'] .wms-toggle-collapsed { - display: inline; + html[data-wms-sidebar='collapsed'] .wms-brand-mark { + cursor: pointer; } @media (max-width: 1023px) { @@ -537,135 +632,36 @@ select:focus[data-flux-control] { text-decoration: none; } + .wms-page-hero { + align-items: flex-start; + flex-direction: column; + gap: 1.5rem; + margin-bottom: 1rem; + border-radius: 1rem; + padding: 1.35rem; + } + + .wms-page-hero-actions { + width: 100%; + flex-wrap: wrap; + } + + .wms-page-hero-stat { + min-width: min(12rem, 100%); + flex: 1 1 12rem; + padding: 1rem; + } + + .wms-page-hero-stat strong { + font-size: 1.45rem; + } + + .wms-hero-mobile-menu { + display: inline-grid; + } + .wms-content { padding: 1rem; } } } - -@layer components { - .wms-main-panel { - min-width: 0; - flex: 1; - display: flex; - min-height: 100vh; - flex-direction: column; - background: rgb(250 250 250); - } - - .dark .wms-main-panel { - background: rgb(9 9 11); - } - - .wms-page-hero { - margin: 0.75rem 1rem 0; - overflow: hidden; - border-radius: 1rem; - background: linear-gradient(135deg, rgb(2 6 23) 0%, rgb(15 23 42) 55%, rgb(8 80 104) 100%); - color: white; - box-shadow: 0 24px 50px rgb(0 0 0 / 0.22); - } - - .wms-page-hero-content { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - padding: clamp(1rem, 2vw, 1.5rem); - } - - .wms-page-eyebrow { - margin: 0 0 1.15rem; - color: rgb(103 232 249); - font-size: 0.9rem; - font-weight: 800; - letter-spacing: 0.32em; - text-transform: uppercase; - } - - .wms-page-title { - margin: 0; - max-width: 58rem; - color: white; - font-size: clamp(1.4rem, 2vw, 2rem); - font-weight: 850; - letter-spacing: -0.06em; - line-height: 0.96; - } - - .wms-page-subtitle { - margin: 0.5rem 0 0; - max-width: 60rem; - color: rgb(203 213 225); - font-size: 0.95rem; - line-height: 1.55; - } - - .wms-page-metrics { - display: grid; - min-width: min(32rem, 100%); - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 1rem; - } - - .wms-page-metric-card { - border-radius: 1.35rem; - background: rgb(255 255 255 / 0.12); - padding: 1.55rem; - backdrop-filter: blur(16px); - } - - .wms-page-metric-label { - display: block; - color: rgb(203 213 225); - font-size: 1rem; - line-height: 1.2; - } - - .wms-page-metric-value { - display: flex; - align-items: center; - gap: 0.65rem; - margin-top: 1rem; - color: white; - font-size: clamp(1.6rem, 2.4vw, 2.25rem); - font-weight: 850; - line-height: 1; - } - - .wms-page-metric-ok { - color: rgb(110 231 183); - } - - .wms-content { - padding-top: 1.5rem; - } - - .module-page > .row > .col-12:first-child:has(.module-hero) { - display: none; - } - - @media (max-width: 1023px) { - .wms-page-hero { - margin: 1rem 1rem 0; - border-radius: 1.35rem; - } - - .wms-page-hero-content { - align-items: flex-start; - flex-direction: column; - padding: 1.6rem; - } - - .wms-page-metrics { - min-width: 0; - width: 100%; - } - } - - @media (max-width: 640px) { - .wms-page-metrics { - grid-template-columns: 1fr; - } - } -} diff --git a/resources/views/components/wms/page-hero.blade.php b/resources/views/components/wms/page-hero.blade.php new file mode 100644 index 00000000..eb485c81 --- /dev/null +++ b/resources/views/components/wms/page-hero.blade.php @@ -0,0 +1,32 @@ +@props([ + 'eyebrow' => 'MPBA WMS', + 'title', + 'description' => null, + 'stats' => [], +]) + +
+
+

{{ $eyebrow }}

+

{{ $title }}

+ @if($description) +

{{ $description }}

+ @endif +
+ + @if(count($stats)) +
+ @foreach($stats as $stat) +
+

{{ $stat['label'] ?? '' }}

+

+ @if(! empty($stat['icon'])) + + @endif + {{ $stat['value'] ?? '' }} +

+
+ @endforeach +
+ @endif +
diff --git a/resources/views/layouts/app/sidebar.blade.php b/resources/views/layouts/app/sidebar.blade.php index 74694b52..6d770024 100644 --- a/resources/views/layouts/app/sidebar.blade.php +++ b/resources/views/layouts/app/sidebar.blade.php @@ -11,7 +11,7 @@
-
-
-
-

{{ __('MPBA WMS') }}

-

{{ $title ?? __('Platform administration') }}

-

{{ __('Manage tenant companies, licences, payments, warehouses and internal API operations from one resilient control plane.') }}

-
- -
-
- {{ __('System status') }} - - - {{ __('OK') }} - -
- -
- {{ __('Paid £') }} - - @isset($paymentsTotal) - {{ number_format($paymentsTotal / 100, 2) }} - @else - 0.00 - @endisset - -
-
-
-
+ @php + $pageTitle = $title ?? __('Warehouse Management System'); + $pageDescription = match (true) { + request()->routeIs('platform.dashboard') => __('Manage tenant companies, licences, payments, warehouses and internal API operations from one resilient control plane.'), + request()->routeIs('platform.companies.*') => __('Manage tenant companies, ownership, users and the warehouse records attached to each organisation.'), + request()->routeIs('platform.licenses.*') => __('Review licence allocation, account status and platform access across MPBA tenants.'), + request()->routeIs('platform.payments.*') => __('Track payment activity, paid totals and tenant billing status from one administration screen.'), + request()->routeIs('warehouses.*') => __('Maintain warehouse locations, operational details and company ownership records.'), + request()->routeIs('inventory-management.*') => __('Monitor inventory activity, stock positions and warehouse item control.'), + request()->routeIs('analytics.*') => __('Review operational insight, warehouse trends and management reporting.'), + default => __('Manage tenant companies, licences, payments, warehouses and internal API operations from one resilient control plane.'), + }; + @endphp
+
+
+
{{ __('MPBA WMS') }}
+

{{ $pageTitle }}

+

{{ $pageDescription }}

+
+ +
+ + +
+ {{ __('System status') }} + {{ __('OK') }} +
+ +
+ {{ __('Paid £') }} + 0.00 +
+
+
+ {{ $slot }}
@@ -304,6 +302,19 @@ applySidebarState(); }); }); + document.querySelectorAll('[data-wms-brand-toggle]').forEach((button) => { + if (button.dataset.wmsBound === '1') return; + button.dataset.wmsBound = '1'; + button.addEventListener('click', function (event) { + const root = document.documentElement; + if (root.dataset.wmsSidebar !== 'collapsed') return; + event.preventDefault(); + event.stopPropagation(); + root.dataset.wmsSidebar = 'expanded'; + localStorage.setItem(STORAGE_KEY, 'expanded'); + applySidebarState(); + }); + }); document.querySelectorAll('[data-wms-mobile-open]').forEach((button) => { if (button.dataset.wmsBound === '1') return; button.dataset.wmsBound = '1'; diff --git a/storage/framework/cache/.gitkeep b/storage/framework/cache/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/storage/framework/cache/data/.gitkeep b/storage/framework/cache/data/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/storage/framework/views/.gitkeep b/storage/framework/views/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/storage/framework/views/3d7c4a50df1d313410bd5444267891cf.php b/storage/framework/views/3d7c4a50df1d313410bd5444267891cf.php index f7fb7df3..30736df4 100755 --- a/storage/framework/views/3d7c4a50df1d313410bd5444267891cf.php +++ b/storage/framework/views/3d7c4a50df1d313410bd5444267891cf.php @@ -27,7 +27,7 @@
-
-
-
-

-

-

-
- -
-
- - - - - - -
- -
- - - - - - - 0.00 - - -
-
-
-
+ routeIs('platform.dashboard') => __('Manage tenant companies, licences, payments, warehouses and internal API operations from one resilient control plane.'), + request()->routeIs('platform.companies.*') => __('Manage tenant companies, ownership, users and the warehouse records attached to each organisation.'), + request()->routeIs('platform.licenses.*') => __('Review licence allocation, account status and platform access across MPBA tenants.'), + request()->routeIs('platform.payments.*') => __('Track payment activity, paid totals and tenant billing status from one administration screen.'), + request()->routeIs('warehouses.*') => __('Maintain warehouse locations, operational details and company ownership records.'), + request()->routeIs('inventory-management.*') => __('Monitor inventory activity, stock positions and warehouse item control.'), + request()->routeIs('analytics.*') => __('Review operational insight, warehouse trends and management reporting.'), + default => __('Manage tenant companies, licences, payments, warehouses and internal API operations from one resilient control plane.'), + }; + ?>
+
+
+
+

+

+
+ +
+ + +
+ + +
+ +
+ + 0.00 +
+
+
+
@@ -460,6 +456,19 @@ applySidebarState(); }); }); + document.querySelectorAll('[data-wms-brand-toggle]').forEach((button) => { + if (button.dataset.wmsBound === '1') return; + button.dataset.wmsBound = '1'; + button.addEventListener('click', function (event) { + const root = document.documentElement; + if (root.dataset.wmsSidebar !== 'collapsed') return; + event.preventDefault(); + event.stopPropagation(); + root.dataset.wmsSidebar = 'expanded'; + localStorage.setItem(STORAGE_KEY, 'expanded'); + applySidebarState(); + }); + }); document.querySelectorAll('[data-wms-mobile-open]').forEach((button) => { if (button.dataset.wmsBound === '1') return; button.dataset.wmsBound = '1'; diff --git a/storage/framework/views/3feb8572f4b247ceb864938a4490c071.php b/storage/framework/views/3feb8572f4b247ceb864938a4490c071.php new file mode 100755 index 00000000..0fdd4665 --- /dev/null +++ b/storage/framework/views/3feb8572f4b247ceb864938a4490c071.php @@ -0,0 +1,66 @@ +env; + +if (($__data['attributes'] ?? null) instanceof \Illuminate\View\ComponentAttributeBag) { $__data = $__data + $__data['attributes']->all(); unset($__data['attributes']); } +extract($__slots, EXTR_SKIP); unset($__slots); +extract($__data, EXTR_SKIP); +$attributes = \Livewire\Blaze\Runtime\BlazeAttributeBag::make($__data, $__bound, $__keys); +unset($__data, $__bound, $__keys); +ob_start(); +?> + + + + + 'outline', +]; +$variant ??= $attributes['variant'] ?? $__defaults['variant']; unset($attributes['variant']); +unset($__defaults); +?> + +add(match($variant) { + 'outline' => '[:where(&)]:size-6', + 'solid' => '[:where(&)]:size-6', + 'mini' => '[:where(&)]:size-5', + 'micro' => '[:where(&)]:size-4', + }); +?> + + +class($classes)); ?> data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon"> + + + + + + +class($classes)); ?> data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon"> + + + + + + +class($classes)); ?> data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> + + + + + + +class($classes)); ?> data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon"> + + + + + + + \ No newline at end of file diff --git a/storage/framework/views/986fb95c0ca2c23afb55cc89b1b07e48.php b/storage/framework/views/986fb95c0ca2c23afb55cc89b1b07e48.php new file mode 100755 index 00000000..1e6c1ef6 --- /dev/null +++ b/storage/framework/views/986fb95c0ca2c23afb55cc89b1b07e48.php @@ -0,0 +1,88 @@ +env; + +if (($__data['attributes'] ?? null) instanceof \Illuminate\View\ComponentAttributeBag) { $__data = $__data + $__data['attributes']->all(); unset($__data['attributes']); } +extract($__slots, EXTR_SKIP); unset($__slots); +extract($__data, EXTR_SKIP); +$attributes = \Livewire\Blaze\Runtime\BlazeAttributeBag::make($__data, $__bound, $__keys); +unset($__data, $__bound, $__keys); +ob_start(); +?> + + +pluck('icon:variant'); ?> +pluck('icon:trailing'); ?> + + 'micro', + 'iconTrailing' => null, + 'initials' => null, + 'chevron' => true, + 'circle' => null, + 'avatar' => null, + 'name' => null, +]; +$iconVariant ??= $attributes['icon-variant'] ?? $attributes['iconVariant'] ?? $__defaults['iconVariant']; unset($attributes['iconVariant'], $attributes['icon-variant']); +$iconTrailing ??= $attributes['icon-trailing'] ?? $attributes['iconTrailing'] ?? $__defaults['iconTrailing']; unset($attributes['iconTrailing'], $attributes['icon-trailing']); +$initials ??= $attributes['initials'] ?? $__defaults['initials']; unset($attributes['initials']); +$chevron ??= $attributes['chevron'] ?? $__defaults['chevron']; unset($attributes['chevron']); +$circle ??= $attributes['circle'] ?? $__defaults['circle']; unset($attributes['circle']); +$avatar ??= $attributes['avatar'] ?? $__defaults['avatar']; unset($attributes['avatar']); +$name ??= $attributes['name'] ?? $__defaults['name']; unset($attributes['name']); +unset($__defaults); +?> + +add($iconVariant === 'outline' ? 'size-4' : ''); + +$classes = Flux::classes() + ->add('group flex items-center') + ->add('rounded-lg has-data-[circle=true]:rounded-full') + ->add('[ui-dropdown>&]:w-full') // Without this, the "name" won't get truncated in a sidebar dropdown... + ->add('p-1 hover:bg-zinc-800/5 dark:hover:bg-white/15') + ; +?> + + + \ No newline at end of file