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

made all components common

Browse Source
This commit is contained in:
Mark Gregory
2026-07-02 09:32:00 +01:00
parent fbf7a1fc6b
commit b8a9ab2e24
5 changed files with 162 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+6 -6
View File
@@ -80,7 +80,7 @@
</label>
<div class="mt-2" wire:ignore>
<select id="company_id" dusk="ticket-company" data-helpdesk-select2
<select id="company_id" dusk="ticket-company" data-helpdesk-select2 wire:model.defer="company_id" name="company_id"
data-placeholder="Select option" data-wire-model="company_id"
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="">Select company</option>
@@ -103,7 +103,7 @@
</label>
<div class="mt-2" wire:ignore>
<select id="board_id" data-helpdesk-select2 data-placeholder="Select option"
<select id="board_id" data-helpdesk-select2 wire:model.defer="board_id" name="board_id" data-placeholder="Select option"
data-wire-model="board_id"
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
data-dusk="ticket-board" dusk="ticket-board">
@@ -126,7 +126,7 @@
</label>
<div class="mt-2" wire:ignore>
<select id="priority_id" data-helpdesk-select2 data-placeholder="Select option"
<select id="priority_id" data-helpdesk-select2 wire:model.defer="priority_id" name="priority_id" data-placeholder="Select option"
data-wire-model="priority_id"
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
data-dusk="ticket-priority" dusk="ticket-priority">
@@ -149,7 +149,7 @@
</label>
<div class="mt-2" wire:ignore>
<select id="category_id" data-helpdesk-select2 data-placeholder="Select option"
<select id="category_id" data-helpdesk-select2 wire:model.defer="category_id" name="category_id" data-placeholder="Select option"
data-wire-model="category_id"
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="">Select category</option>
@@ -171,7 +171,7 @@
</label>
<div class="mt-2" wire:ignore>
<select id="project_id" data-helpdesk-select2 data-placeholder="Select option"
<select id="project_id" data-helpdesk-select2 wire:model.defer="project_id" name="project_id" data-placeholder="Select option"
data-wire-model="project_id"
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="">Select project</option>
@@ -193,7 +193,7 @@
</label>
<div class="mt-2" wire:ignore>
<select id="team_id" data-helpdesk-select2 data-placeholder="Select option"
<select id="team_id" data-helpdesk-select2 wire:model.defer="team_id" name="team_id" data-placeholder="Select option"
data-wire-model="team_id"
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="">Select team</option>
Modules/Helpdesk/Resources/views/partials/page-header.blade.php
+6 -6
View File
@@ -1,24 +1,24 @@
<div class="mb-8 overflow-hidden rounded-3xl border border-slate-800 bg-slate-950 shadow-sm">
<div class="px-6 py-8 text-white">
<div class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-7 text-white">
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<p class="text-sm font-semibold uppercase tracking-[0.3em] text-blue-300">
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-blue-200">
{{ $eyebrow ?? 'Helpdesk' }}
</p>
<h1 class="mt-3 text-3xl font-bold tracking-tight">
<h1 class="mt-2 text-3xl font-semibold tracking-tight">
{{ $title ?? 'Helpdesk' }}
</h1>
@if (!empty($subtitle))
<p class="mt-2 max-w-3xl text-sm text-slate-300">
<p class="mt-2 max-w-3xl text-sm text-blue-100/90">
{{ $subtitle }}
</p>
@endif
</div>
@isset($actions)
<div class="flex flex-wrap items-center gap-3">
<div class="flex flex-wrap gap-2">
{{ $actions }}
</div>
@endisset
resources/css/app.css
+88 -55
View File
@@ -413,18 +413,29 @@ select:focus[data-flux-control] {
}
.wms-page-hero {
overflow: hidden;
margin-bottom: 1.5rem;
border-radius: 1.5rem;
border: 1px solid rgb(228 228 231);
background: rgb(255 255 255);
box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 28px rgb(0 0 0 / 0.08);
}
.dark .wms-page-hero {
border-color: rgb(63 63 70);
background: rgb(24 24 27);
}
.wms-page-hero-inner {
padding: 1.75rem 1.5rem;
background: linear-gradient(135deg, rgb(2 6 23), rgb(15 23 42) 52%, rgb(23 37 84));
color: rgb(255 255 255);
}
.wms-page-hero-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
margin-bottom: 1.25rem;
border-radius: 1rem;
padding: 1.45rem 1.75rem;
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);
flex-direction: column;
gap: 1rem;
}
.wms-page-hero-copy {
@@ -433,70 +444,96 @@ select:focus[data-flux-control] {
}
.wms-page-hero-kicker {
margin-bottom: 0.55rem;
color: rgb(103 232 249);
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0.32em;
margin: 0;
color: rgb(191 219 254);
font-size: 0.75rem;
font-weight: 650;
letter-spacing: 0.28em;
line-height: 1rem;
text-transform: uppercase;
}
.wms-page-hero-title {
margin: 0;
font-size: clamp(1.9rem, 3vw, 2.75rem);
font-weight: 850;
line-height: 1.05;
letter-spacing: -0.04em;
margin: 0.5rem 0 0;
color: rgb(255 255 255);
font-size: 1.875rem;
font-weight: 650;
line-height: 2.25rem;
letter-spacing: -0.025em;
}
.wms-page-hero-description {
max-width: 44rem;
margin-top: 0.65rem;
color: rgb(203 213 225);
font-size: clamp(0.9rem, 1.15vw, 1.05rem);
line-height: 1.45;
max-width: 48rem;
margin: 0.5rem 0 0;
color: rgb(219 234 254 / 0.90);
font-size: 0.875rem;
line-height: 1.35rem;
}
.wms-page-hero-actions {
display: flex;
align-items: stretch;
gap: 0.75rem;
flex: 0 0 auto;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.wms-page-hero-stat {
display: grid;
min-width: 10.5rem;
gap: 0.6rem;
border-radius: 0.9rem;
background: rgb(51 65 85 / 0.72);
padding: 0.9rem 1rem;
color: rgb(203 213 225);
backdrop-filter: blur(10px);
min-width: 8.5rem;
gap: 0.25rem;
border-radius: 0.85rem;
border: 1px solid rgb(255 255 255 / 0.18);
background: rgb(255 255 255 / 0.10);
padding: 0.7rem 0.85rem;
color: rgb(219 234 254 / 0.90);
box-shadow: 0 10px 24px rgb(0 0 0 / 0.18);
}
.wms-page-hero-stat span {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.wms-page-hero-stat strong {
display: flex;
align-items: center;
gap: 0.75rem;
gap: 0.55rem;
color: white;
font-size: 1.35rem;
font-weight: 850;
font-size: 1.25rem;
font-weight: 800;
line-height: 1;
}
.wms-page-hero-stat strong i {
color: rgb(74 222 128);
color: rgb(134 239 172);
}
.wms-page-hero-icon-card {
min-width: 5.75rem;
min-width: 3.25rem;
width: 3.25rem;
height: 3.25rem;
place-items: center;
padding: 0;
text-align: center;
}
.wms-page-hero-icon-card strong {
justify-content: center;
font-size: 1.85rem;
font-size: 1.25rem;
}
@media (min-width: 1024px) {
.wms-page-hero-row {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.wms-page-hero-actions {
justify-content: flex-end;
}
}
.wms-hero-mobile-menu {
@@ -737,12 +774,13 @@ select:focus[data-flux-control] {
}
.wms-page-hero {
align-items: flex-start;
flex-direction: column;
gap: 1rem;
margin-bottom: 0.85rem;
border-radius: 0.9rem;
padding: 1rem;
max-width: 100%;
margin-bottom: 1rem;
border-radius: 1rem;
}
.wms-page-hero-inner {
padding: 1.25rem;
}
.wms-page-hero-actions {
@@ -751,13 +789,8 @@ select:focus[data-flux-control] {
}
.wms-page-hero-stat {
min-width: min(12rem, 100%);
flex: 1 1 12rem;
padding: 0.8rem;
}
.wms-page-hero-stat strong {
font-size: 1.2rem;
min-width: min(10rem, 100%);
flex: 1 1 10rem;
}
.wms-hero-mobile-menu {
resources/js/app.js
+23
View File
@@ -136,6 +136,27 @@ function renderWmsCharts() {
});
}
function livewireComponentFor(element) {
const componentRoot = element.closest('[wire\:id]');
if (!componentRoot || !window.Livewire) {
return null;
}
return window.Livewire.find(componentRoot.getAttribute('wire:id'));
}
function setLivewireProperty(element, model, value) {
const component = livewireComponentFor(element);
if (!component || !model) {
return;
}
component.set(model, value === '' ? null : value);
}
/**
* Initialise Select2 controls.
*
@@ -168,6 +189,8 @@ function initialiseSelect2() {
$select.off('change.select2-livewire');
$select.on('change.select2-livewire', function () {
setLivewireProperty(this, this.dataset.wireModel, $select.val());
this.dispatchEvent(
new Event('change', {
bubbles: true,
resources/views/components/wms/page-hero.blade.php
+39 -27
View File
@@ -2,40 +2,52 @@
'eyebrow' => 'MPBA WMS',
'title',
'description' => null,
'subtitle' => null,
'icon' => null,
'stats' => [],
])
@php
$heroDescription = $description ?? $subtitle ?? null;
@endphp
<section {{ $attributes->merge(['class' => 'wms-page-hero']) }}>
<div class="wms-page-hero-copy">
<p class="wms-page-hero-kicker">{{ $eyebrow }}</p>
<h1 class="wms-page-hero-title">{{ $title }}</h1>
@if ($description)
<p class="wms-page-hero-description">{{ $description }}</p>
@endif
</div>
<div class="wms-page-hero-inner">
<div class="wms-page-hero-row">
<div class="wms-page-hero-copy">
<p class="wms-page-hero-kicker">{{ $eyebrow }}</p>
<h1 class="wms-page-hero-title">{{ $title }}</h1>
<div class="wms-page-hero-actions">
@foreach ($stats as $stat)
<article class="wms-page-hero-stat">
<span>{{ $stat['label'] ?? '' }}</span>
<strong>
@if (!empty($stat['icon']))
<i class="{{ $stat['icon'] }}" aria-hidden="true"></i>
@if ($heroDescription)
<p class="wms-page-hero-description">{{ $heroDescription }}</p>
@endif
</div>
@if (count($stats) > 0 || $icon || $slot->isNotEmpty())
<div class="wms-page-hero-actions">
@foreach ($stats as $stat)
<article class="wms-page-hero-stat">
<span>{{ $stat['label'] ?? '' }}</span>
<strong>
@if (!empty($stat['icon']))
<i class="{{ $stat['icon'] }}" aria-hidden="true"></i>
@endif
{{ $stat['value'] ?? '' }}
</strong>
</article>
@endforeach
@if ($icon && count($stats) === 0 && $slot->isEmpty())
<article class="wms-page-hero-stat wms-page-hero-icon-card" aria-hidden="true">
<strong><i class="{{ $icon }}"></i></strong>
</article>
@endif
{{ $stat['value'] ?? '' }}
</strong>
</article>
@endforeach
@if ($icon && count($stats) === 0)
<article class="wms-page-hero-stat wms-page-hero-icon-card" aria-hidden="true">
<strong><i class="{{ $icon }}"></i></strong>
</article>
@endif
@if ($slot->isNotEmpty())
{{ $slot }}
@endif
@if ($slot->isNotEmpty())
{{ $slot }}
@endif
</div>
@endif
</div>
</div>
</section>