346 lines
31 KiB
PHP
346 lines
31 KiB
PHP
<div class="space-y-4">
|
|
|
|
{{-- Suche + Aktion --}}
|
|
<div class="">
|
|
<div class="md:flex items-center justify-between gap-3">
|
|
<h1 class="text-5xl #mb-6">Mailboxen</h1>
|
|
</div>
|
|
|
|
<div class="my-4 md:flex items-center justify-end gap-3">
|
|
<input
|
|
type="text"
|
|
wire:model.live.debounce.300ms="search"
|
|
class="md:max-w-96 w-full justify-end flex-1 rounded-xl bg-white/5 border border-white/10 px-4 py-2.5 text-white/90 placeholder:text-white/50"
|
|
placeholder="Suchen (Domain oder Postfach) …">
|
|
</div>
|
|
@if($domains->count())
|
|
<div class="space-y-3">
|
|
|
|
@foreach($domains as $domain)
|
|
<div class="glass-card rounded-xl border border-white/10 #bg-white/[0.04] p-3">
|
|
{{-- Domain-Kopf --}}
|
|
<div class="grid grid-cols-1 md:grid-cols-3 items-center gap-3">
|
|
{{-- Badges: auf md niemals umbrechen --}}
|
|
<div class="shrink-0 flex items-center gap-2 flex-wrap md:flex-nowrap">
|
|
<div
|
|
class="flex items-center gap-1 w-fit px-2 py-0.5 rounded-full text-xs border border-white/15 text-white font-bold bg-white/5">
|
|
<i class="ph ph-globe-hemisphere-east text-[14px]"></i> {{ $domain->domain }}
|
|
</div>
|
|
|
|
{{-- <span--}}
|
|
{{-- class="px-2 py-0.5 rounded-full text-xs border {{ ($domain->is_active ?? true) ? 'border-emerald-400/30 text-emerald-300 bg-emerald-500/10' : 'border-white/15 text-white/60 bg-white/5' }}">--}}
|
|
{{-- {{ ($domain->is_active ?? true) ? 'aktiv' : 'inaktiv' }}--}}
|
|
{{-- </span>--}}
|
|
|
|
<span
|
|
class="px-2 py-0.5 rounded-full text-xs border border-white/15 text-white/70 bg-white/5 whitespace-nowrap">
|
|
<i class="ph ph-user-list text-[12px]"></i> {{ $domain->mail_users_count }} Postfächer
|
|
</span>
|
|
</div>
|
|
|
|
<div class="md:col-span-2 text-right space-x-1">
|
|
<button
|
|
class="inline-flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-2.5 py-1 text-xs text-white/80 hover:text-white hover:border-white/20"
|
|
wire:click="openMailboxCreate({{ $domain->id }})">
|
|
<i class="ph ph-plus text-[12px]"></i> Postfach
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{{-- Postfächer --}}
|
|
{{-- <div class="mt-4 overflow-hidden">--}}
|
|
{{-- <div class="divide-y divide-white/5 space-y-3">--}}
|
|
{{-- @forelse($domain->prepared_mailboxes as $u)--}}
|
|
|
|
{{-- <div class="rounded-xl border border-white/10 flex flex-col md:flex-row md:items-center gap-3 px-3 py-3 bg-white/[0.04]">--}}
|
|
{{-- <div class="min-w-0 flex-1">--}}
|
|
{{-- <div class="text-white/90 font-medium truncate">--}}
|
|
{{-- {{ $u['localpart'] !== '' ? ($u['localpart'].'@'.$domain->domain) : '—' }}--}}
|
|
{{-- </div>--}}
|
|
|
|
{{-- <div class="mt-1 flex items-center gap-2 flex-wrap md:flex-nowrap">--}}
|
|
{{-- <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs border whitespace-nowrap--}}
|
|
{{-- {{ $u['is_effective_active'] ? 'border-emerald-400/30 text-emerald-300 bg-emerald-500/10'--}}
|
|
{{-- : 'border-white/15 text-white/60 bg-white/5' }}">--}}
|
|
{{-- {{ $u['is_effective_active'] ? 'aktiv' : 'inaktiv' }}--}}
|
|
{{-- </span>--}}
|
|
{{-- @if(!$u['is_effective_active'] && !empty($u['inactive_reason']))--}}
|
|
{{-- <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs border border-amber-400/30 text-amber-300 bg-amber-500/10 whitespace-nowrap">--}}
|
|
{{-- {{ $u['inactive_reason'] }}--}}
|
|
{{-- </span>--}}
|
|
{{-- @endif--}}
|
|
|
|
{{-- <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs border border-white/15 text-white/70 bg-white/5 whitespace-nowrap">--}}
|
|
{{-- Max {{ $u['quota_mb'] }} MiB--}}
|
|
{{-- </span>--}}
|
|
{{-- <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs border border-white/15 text-white/70 bg-white/5 whitespace-nowrap">--}}
|
|
{{-- Verbraucht: {{ $u['used_mb'] }} MiB ({{ $u['usage_percent'] }} %)--}}
|
|
{{-- </span>--}}
|
|
{{-- <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs border border-white/15 text-white/70 bg-white/5 whitespace-nowrap">--}}
|
|
{{-- <i class="ph ph-at text-[12px] mr-1"></i> {{ $u['message_count'] }} E-Mails--}}
|
|
{{-- </span>--}}
|
|
{{-- </div>--}}
|
|
{{-- <div class="mt-2 h-1.5 rounded-full bg-white/10 overflow-hidden {{ $u['is_effective_active'] ? '' : 'opacity-40' }}">--}}
|
|
{{-- <div class="h-full rounded-full bg-emerald-400/50" style="width: {{ $u['usage_percent'] }}%"></div>--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
|
|
{{-- <hr class="md:hidden">--}}
|
|
|
|
{{-- Aktionen--}}
|
|
{{-- <div class="md:ml-3 flex items-center gap-2 md:justify-end">--}}
|
|
{{-- Bearbeiten--}}
|
|
{{-- <button--}}
|
|
{{-- class="inline-flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-white/80 hover:text-white hover:border-white/20"--}}
|
|
{{-- wire:click="openMailboxEdit({{ $u['id'] }})">--}}
|
|
{{-- <i class="ph ph-pencil-simple text-[12px]"></i> Bearbeiten--}}
|
|
{{-- </button>--}}
|
|
|
|
{{-- Löschen--}}
|
|
{{-- <button--}}
|
|
{{-- class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs bg-rose-500/20 text-rose-200 border border-rose-400/40 hover:bg-rose-500/30"--}}
|
|
{{-- wire:click="openMailboxDelete({{ $u['id'] }})">--}}
|
|
{{-- <i class="ph ph-trash-simple text-[12px]"></i> Löschen--}}
|
|
{{-- </button>--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
|
|
{{-- @empty--}}
|
|
{{-- <div class="px-3 py-3 text-center text-xs bg-white/[0.04] text-white/60 italic">Keine Postfächer</div>--}}
|
|
{{-- @endforelse--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- Postfächer (responsive: Cards < md, Table ≥ md) --}}
|
|
<div class="mt-4">
|
|
|
|
{{-- MOBILE: Card-View --}}
|
|
<div class="md:hidden space-y-3">
|
|
@forelse($domain->prepared_mailboxes as $u)
|
|
<div class="rounded-xl border border-white/10 bg-white/5 p-3">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<div class="font-semibold text-white truncate">
|
|
{{ $u['localpart'] ? ($u['localpart'].'@'.$domain->domain) : '—' }}
|
|
</div>
|
|
<div class="mt-1 flex flex-wrap items-center gap-2">
|
|
<span class="px-2 py-0.5 rounded-full text-xs border
|
|
{{ $u['is_effective_active'] ? 'border-emerald-400/30 text-emerald-300 bg-emerald-500/10'
|
|
: 'border-white/15 text-white/60 bg-white/5' }}">
|
|
{{ $u['is_effective_active'] ? 'aktiv' : 'inaktiv' }}
|
|
</span>
|
|
{{-- Optional: Grund anzeigen --}}
|
|
@if(!$u['is_effective_active'] && !empty($u['inactive_reason']))
|
|
<span
|
|
class="px-2 py-0.5 rounded-full text-xs border border-amber-400/30 text-amber-300 bg-amber-500/10">
|
|
{{ $u['inactive_reason'] }}
|
|
</span>
|
|
@endif
|
|
|
|
<span
|
|
class="px-2 py-0.5 rounded-full text-xs border border-white/15 text-white/70 bg-white/5">
|
|
{{ $u['quota_mb'] }} MiB
|
|
</span>
|
|
<span
|
|
class="px-2 py-0.5 rounded-full text-xs border border-white/15 text-white/70 bg-white/5">
|
|
Verbraucht: {{ $u['used_mb'] }} MiB ({{ $u['usage_percent'] }} %)
|
|
</span>
|
|
<span
|
|
class="px-2 py-0.5 rounded-full text-xs border border-white/15 text-white/70 bg-white/5">
|
|
<i class="ph ph-at mr-1 text-[12px]"></i> {{ $u['message_count'] }} E-Mails
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="shrink-0 flex flex-col gap-2">
|
|
<div class="flex justify-end mb-2">
|
|
<button wire:click="updateMailboxStats"
|
|
class="px-3 py-1 text-sm rounded-md bg-blue-600 text-white hover:bg-blue-700 transition">
|
|
Jetzt aktualisieren
|
|
</button>
|
|
</div>
|
|
<button
|
|
class="inline-flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-white/80 hover:text-white hover:border-white/20"
|
|
wire:click="openMailboxEdit({{ $u['id'] }})">
|
|
<i class="ph ph-pencil-simple text-[12px]"></i> Bearbeiten
|
|
</button>
|
|
<button
|
|
class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs bg-rose-500/20 text-rose-200 border border-rose-400/40 hover:bg-rose-500/30"
|
|
wire:click="openMailboxDelete({{ $u['id'] }})">
|
|
<i class="ph ph-trash-simple text-[12px]"></i> Löschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Progress --}}
|
|
<div
|
|
class="mt-3 h-1.5 rounded-full bg-white/10 overflow-hidden {{ $u['is_effective_active'] ? '' : 'opacity-40' }}">
|
|
<div class="h-full rounded-full bg-emerald-400/50"
|
|
style="width: {{ $u['usage_percent'] }}%"></div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="px-3 py-3 text-center text-xs bg-white/5 text-white/60 italic">Keine
|
|
Postfächer
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- DESKTOP: Table-View --}}
|
|
{{-- <div class="hidden md:block overflow-x-auto">--}}
|
|
{{-- <table class="min-w-full text-sm">--}}
|
|
{{-- <thead>--}}
|
|
{{-- <tr class="text-white/60 bg-white/5">--}}
|
|
{{-- <th class="px-3 py-2 text-left font-medium">E-Mail</th>--}}
|
|
{{-- <th class="px-3 py-2 text-left font-medium">Status</th>--}}
|
|
{{-- <th class="px-3 py-2 text-left font-medium">Quota</th>--}}
|
|
{{-- <th class="px-3 py-2 text-left font-medium">Verbrauch</th>--}}
|
|
{{-- <th class="px-3 py-2 text-left font-medium"><i class="ph ph-at"></i> E-Mails</th>--}}
|
|
{{-- <th class="px-3 py-2 text-left font-medium w-64">Auslastung</th>--}}
|
|
{{-- <th class="px-3 py-2 text-right font-medium">Aktionen</th>--}}
|
|
{{-- </tr>--}}
|
|
{{-- </thead>--}}
|
|
{{-- <tbody class="divide-y divide-white/5">--}}
|
|
{{-- @forelse($domain->prepared_mailboxes as $u)--}}
|
|
{{-- <tr class="hover:bg-white/[0.04]">--}}
|
|
{{-- <td class="px-3 py-2 font-medium text-white truncate max-w-[280px]">--}}
|
|
{{-- {{ $u['localpart'] ? ($u['localpart'].'@'.$domain->domain) : '—' }}--}}
|
|
{{-- </td>--}}
|
|
{{-- <td class="px-3 py-2">--}}
|
|
{{-- <span class="px-2 py-0.5 rounded-full text-xs border--}}
|
|
{{-- {{ $u['is_effective_active'] ? 'border-emerald-400/30 text-emerald-300 bg-emerald-500/10'--}}
|
|
{{-- : 'border-white/15 text-white/60 bg-white/5' }}">--}}
|
|
{{-- {{ $u['is_effective_active'] ? 'aktiv' : 'inaktiv' }}--}}
|
|
{{-- </span>--}}
|
|
{{-- @if(!$u['is_effective_active'] && !empty($u['inactive_reason']))--}}
|
|
{{-- <span class="ml-2 px-2 py-0.5 rounded-full text-xs border border-amber-400/30 text-amber-300 bg-amber-500/10">--}}
|
|
{{-- {{ $u['inactive_reason'] }}--}}
|
|
{{-- </span>--}}
|
|
{{-- @endif--}}
|
|
{{-- </td>--}}
|
|
{{-- <td class="px-3 py-2 text-white/80">{{ $u['quota_mb'] }} MiB</td>--}}
|
|
{{-- <td class="px-3 py-2 text-white/80">{{ $u['used_mb'] }} MiB ({{ $u['usage_percent'] }} %)</td>--}}
|
|
{{-- <td class="px-3 py-2 text-white/80">{{ $u['message_count'] }}</td>--}}
|
|
{{-- <td class="px-3 py-2">--}}
|
|
{{-- <div class="h-1.5 rounded-full bg-white/10 overflow-hidden {{ $u['is_effective_active'] ? '' : 'opacity-40' }}">--}}
|
|
{{-- <div class="h-full rounded-full bg-emerald-400/50" style="width: {{ $u['usage_percent'] }}%"></div>--}}
|
|
{{-- </div>--}}
|
|
{{-- </td>--}}
|
|
{{-- <td class="px-3 py-2">--}}
|
|
{{-- <div class="flex items-center gap-2 justify-end">--}}
|
|
{{-- <button--}}
|
|
{{-- class="inline-flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-white/80 hover:text-white hover:border-white/20"--}}
|
|
{{-- wire:click="openMailboxEdit({{ $u['id'] }})">--}}
|
|
{{-- <i class="ph ph-pencil-simple text-[12px]"></i> Bearbeiten--}}
|
|
{{-- </button>--}}
|
|
{{-- <button--}}
|
|
{{-- class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs bg-rose-500/20 text-rose-200 border border-rose-400/40 hover:bg-rose-500/30"--}}
|
|
{{-- wire:click="openMailboxDelete({{ $u['id'] }})">--}}
|
|
{{-- <i class="ph ph-trash-simple text-[12px]"></i> Löschen--}}
|
|
{{-- </button>--}}
|
|
{{-- </div>--}}
|
|
{{-- </td>--}}
|
|
{{-- </tr>--}}
|
|
{{-- @empty--}}
|
|
{{-- <tr>--}}
|
|
{{-- <td colspan="7" class="px-3 py-4 text-center text-xs text-white/60 italic">--}}
|
|
{{-- Keine Postfächer--}}
|
|
{{-- </td>--}}
|
|
{{-- </tr>--}}
|
|
{{-- @endforelse--}}
|
|
{{-- </tbody>--}}
|
|
{{-- </table>--}}
|
|
{{-- </div>--}}
|
|
|
|
<div class="hidden md:block overflow-x-auto">
|
|
<table class="min-w-full text-sm border-separate border-spacing-y-2">
|
|
{{-- HEADER: komplette Kapsel, alle Ecken rund --}}
|
|
<thead>
|
|
<tr class="bg-white/[0.06] text-white/70">
|
|
<th class="px-3 py-2 text-left font-medium rounded-l-xl">E-Mail</th>
|
|
<th class="px-3 py-2 text-left font-medium">Status</th>
|
|
<th class="px-3 py-2 text-left font-medium">Quota</th>
|
|
<th class="px-3 py-2 text-left font-medium">Verbrauch</th>
|
|
<th class="px-3 py-2 text-left font-medium"><i class="ph ph-at"></i> E-Mails
|
|
</th>
|
|
<th class="px-3 py-2 text-left font-medium">Auslastung</th>
|
|
<th class="px-3 py-2 text-right font-medium rounded-r-xl">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
@forelse($domain->prepared_mailboxes as $u)
|
|
{{-- ROW: Kapsel beim Hover, ohne Border/Ring --}}
|
|
<tr class="bg-white/[0.03] hover:bg-white/[0.06] transition-colors duration-200">
|
|
<td class="px-3 py-2 font-medium text-white truncate max-w-[280px] rounded-l-xl">
|
|
{{ $u['localpart'] ? ($u['localpart'].'@'.$domain->domain) : '—' }}
|
|
</td>
|
|
|
|
<td class="px-3 py-2">
|
|
@if(!$u['is_effective_active'] && !empty($u['inactive_reason']))
|
|
<span
|
|
class="#ml-2 px-2 py-0.5 rounded-full text-xs border border-amber-400/30 text-amber-300 bg-amber-500/10">
|
|
{{ $u['inactive_reason'] }}
|
|
</span>
|
|
@else
|
|
<span
|
|
class="px-2 py-0.5 rounded-full text-xs border border-emerald-400/30 text-emerald-300 bg-emerald-500/10">
|
|
Aktiv
|
|
</span>
|
|
@endif
|
|
|
|
</td>
|
|
|
|
<td class="px-3 py-2 text-white/80">{{ $u['quota_mb'] }} MiB</td>
|
|
<td class="px-3 py-2 text-white/80">{{ $u['used_mb'] }} MiB
|
|
({{ $u['usage_percent'] }} %)
|
|
</td>
|
|
<td class="px-3 py-2 text-white/80">{{ $u['message_count'] }}</td>
|
|
|
|
<td class="px-3 py-2">
|
|
<div
|
|
class="h-1.5 rounded-full bg-white/10 overflow-hidden {{ $u['is_effective_active'] ? '' : 'opacity-40' }}">
|
|
<div class="h-full rounded-full bg-emerald-400/50"
|
|
style="width: {{ $u['usage_percent'] }}%"></div>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="px-3 py-2 rounded-r-xl">
|
|
<div class="flex items-center gap-2 justify-end">
|
|
{{-- <button wire:click="updateMailboxStatsOne('{{ $u['localpart'].'@'.$domain->domain }}')">Jetzt aktualisieren</button>--}}
|
|
<button wire:click="updateMailboxStats"
|
|
class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs
|
|
bg-blue-500/20 text-blue-200 border border-blue-400/40
|
|
hover:bg-blue-500/30 hover:text-white transition">
|
|
<i class="ph ph-arrow-clockwise text-[12px]"></i> Jetzt aktualisieren
|
|
</button>
|
|
<button wire:click="openMailboxEdit({{ $u['id'] }})"
|
|
class="inline-flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-white/80 hover:text-white hover:border-white/20">
|
|
<i class="ph ph-pencil-simple text-[12px]"></i> Bearbeiten
|
|
</button>
|
|
<button wire:click="openMailboxDelete({{ $u['id'] }})"
|
|
class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs bg-rose-500/20 text-rose-200 border border-rose-400/40 hover:bg-rose-500/30">
|
|
<i class="ph ph-trash-simple text-[12px]"></i> Löschen
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="7" class="px-3 py-4 text-center text-xs text-white/60 italic">
|
|
Keine Postfächer
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
@else
|
|
<div class="rounded-xl border border-white/10 bg-white/[0.04] px-3 py-6 text-white/75 text-center">
|
|
Noch keine Mailboxen vorhanden.
|
|
</div>
|
|
@endif
|
|
</div>
|