Rebrand Hub+Flux

resources/views/livewire/admin/companies/show.blade.php

@@ -192,129 +192,198 @@ new #[Layout('components.layouts.app'), Title('Firma anzeigen')] class extends C
     }
 }; ?>
 
-<div class="space-y-6">
-    <flux:card>
-        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-            <div class="flex gap-4">
-                @php($logoUrl = $company->logoUrl())
+<div class="space-y-8">
+    @if (session('success'))
+        <div class="px-4 py-3 rounded-[5px] border text-[12.5px]
+                    bg-[color:var(--color-ok-soft)] border-[color:var(--color-ok)]/30 text-[color:var(--color-gain-deep)]">
+            {{ session('success') }}
+        </div>
+    @endif
+    @if (session('error'))
+        <div class="px-4 py-3 rounded-[5px] border text-[12.5px]
+                    bg-[color:var(--color-err-soft)] border-[color:var(--color-err)]/30 text-[color:var(--color-loss)]">
+            {{ session('error') }}
+        </div>
+    @endif
+    @if (session('info'))
+        <div class="px-4 py-3 rounded-[5px] border text-[12.5px]
+                    bg-[color:var(--color-hub-soft)] border-[color:var(--color-hub-soft-2)] text-[color:var(--color-ink-2)]">
+            {{ session('info') }}
+        </div>
+    @endif
 
-                @if($logoUrl)
-                    <img src="{{ $logoUrl }}" width="80" height="80" class="h-20 max-h-20 w-20 max-w-20 rounded-lg border border-zinc-200 object-contain dark:border-zinc-700" alt="{{ $company->name }}">
+    {{-- ============== PAGE HEADER ============== --}}
+    @php($logoUrl = $company->logoUrl())
+    <header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
+        <div class="min-w-0">
+            <div class="flex items-center gap-3 mb-3 flex-wrap">
+                <span class="badge hub dot">{{ __('Admin Backend') }}</span>
+                <span class="eyebrow muted">{{ __('Stammdaten · Firma') }}</span>
+                @if ($company->is_active)
+                    <span class="badge ok">{{ __('Aktiv') }}</span>
                 @else
-                    <div class="flex h-20 w-20 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800">
-                        <flux:icon.building-office class="size-10 text-zinc-400" />
+                    <span class="badge err">{{ __('Inaktiv') }}</span>
+                @endif
+                <span class="badge hub">{{ $company->portal?->label() ?? __('Unbekannt') }}</span>
+                <span class="badge hub">ID {{ $company->id }}</span>
+            </div>
+            <div class="flex items-start gap-4">
+                @if ($logoUrl)
+                    <img src="{{ $logoUrl }}" width="64" height="64"
+                         class="h-16 max-h-16 w-16 max-w-16 rounded-[6px] border border-[color:var(--color-bg-rule)] object-contain bg-[color:var(--color-bg-elev)] flex-shrink-0"
+                         alt="{{ $company->name }}">
+                @else
+                    <div class="flex h-16 w-16 items-center justify-center rounded-[6px]
+                                border border-[color:var(--color-bg-rule)] bg-[color:var(--color-bg-elev)] flex-shrink-0">
+                        <flux:icon.building-office class="size-7 text-[color:var(--color-ink-3)]" />
                     </div>
                 @endif
-
-                <div>
-                    <flux:heading size="xl" class="mb-2">{{ $company->name }}</flux:heading>
-                    <div class="flex flex-wrap gap-2">
-                        @if($company->is_active)
-                            <flux:badge color="green" size="sm">{{ __('Aktiv') }}</flux:badge>
-                        @else
-                            <flux:badge color="red" size="sm">{{ __('Inaktiv') }}</flux:badge>
-                        @endif
-                        <flux:badge color="{{ $this->portalBadgeColor($company->portal) }}" size="sm">{{ $company->portal?->label() ?? __('Unbekannt') }}</flux:badge>
-                        <flux:text class="ml-2 text-sm text-zinc-500">ID: {{ $company->id }}</flux:text>
-                    </div>
+                <div class="min-w-0">
+                    <h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)] break-words">
+                        {{ $company->name }}
+                    </h1>
+                    @if ($company->website)
+                        <a href="{{ $company->website }}" target="_blank" rel="noopener"
+                           class="text-[12.5px] text-[color:var(--color-hub)] underline underline-offset-2 decoration-[color:var(--color-hub)]/40 hover:decoration-[color:var(--color-hub)] mt-1 inline-block">
+                            {{ $company->website }}
+                        </a>
+                    @endif
                 </div>
             </div>
+        </div>
 
-            <div class="flex gap-2">
-                <flux:button icon="pencil" href="{{ route('admin.companies.edit', $company->id) }}" wire:navigate>
-                    {{ __('Bearbeiten') }}
+        <div class="flex items-center gap-2 flex-shrink-0">
+            <flux:button variant="ghost" icon="arrow-left" href="{{ route('admin.companies.index') }}" wire:navigate>
+                {{ __('Zurück') }}
+            </flux:button>
+            @if (\Illuminate\Support\Facades\Route::has('admin.companies.contacts.create'))
+                <flux:button variant="ghost" icon="user-plus" href="{{ route('admin.companies.contacts.create', ['companyId' => $company->id]) }}" wire:navigate>
+                    {{ __('Kontakt hinzufügen') }}
                 </flux:button>
-                @if (\Illuminate\Support\Facades\Route::has('admin.companies.contacts.create'))
-                    <flux:button variant="ghost" icon="user-plus" href="{{ route('admin.companies.contacts.create', ['companyId' => $company->id]) }}" wire:navigate>
-                        {{ __('Kontakt hinzufügen') }}
-                    </flux:button>
-                @endif
-            </div>
-        </div>
-    </flux:card>
-
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <flux:card>
-            <flux:text class="text-sm text-zinc-500">{{ __('Pressemitteilungen') }}</flux:text>
-            <flux:text size="xl" weight="bold">{{ $company->press_releases_count }}</flux:text>
-        </flux:card>
-        <flux:card>
-            <flux:text class="text-sm text-zinc-500">{{ __('Kontakte') }}</flux:text>
-            <flux:text size="xl" weight="bold">{{ $company->contacts_count }}</flux:text>
-        </flux:card>
-        <flux:card>
-            <flux:text class="text-sm text-zinc-500">{{ __('Verknüpfte Benutzer') }}</flux:text>
-            <flux:text size="xl" weight="bold">{{ $company->users_count }}</flux:text>
-        </flux:card>
-    </div>
-
-    <flux:card>
-        <div class="flex gap-2">
-            <flux:button
-                :variant="$activeTab === 'overview' ? 'primary' : 'ghost'"
-                wire:click="setTab('overview')"
-            >
-                {{ __('Überblick') }}
-            </flux:button>
-            <flux:button
-                :variant="$activeTab === 'contacts' ? 'primary' : 'ghost'"
-                wire:click="setTab('contacts')"
-            >
-                {{ __('Kontakte') }}
+            @endif
+            <flux:button variant="primary" icon="pencil" href="{{ route('admin.companies.edit', $company->id) }}" wire:navigate>
+                {{ __('Bearbeiten') }}
             </flux:button>
         </div>
-    </flux:card>
+    </header>
 
-    @if($activeTab === 'overview')
+    {{-- ============== KPI-Reihe ============== --}}
+    <section class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <x-portal.stat-card variant="primary" :label="__('Pressemitteilungen')" :value="number_format($company->press_releases_count)">
+            <x-slot:meta>{{ __('insgesamt') }}</x-slot:meta>
+            <x-slot:trend>{{ __('Content-Output dieser Firma') }}</x-slot:trend>
+        </x-portal.stat-card>
+        <x-portal.stat-card variant="ok" :label="__('Kontakte')" :value="number_format($company->contacts_count)">
+            <x-slot:meta>{{ __('Ansprechpartner') }}</x-slot:meta>
+            <x-slot:trend>{{ __('für PMs verfügbar') }}</x-slot:trend>
+        </x-portal.stat-card>
+        <x-portal.stat-card variant="muted" :label="__('Verknüpfte Benutzer')" :value="number_format($company->users_count)">
+            <x-slot:meta>{{ __('Owner & Co-Editors') }}</x-slot:meta>
+            <x-slot:trend>{{ __('Backend-Zugriff') }}</x-slot:trend>
+        </x-portal.stat-card>
+    </section>
+
+    {{-- ============== TABS ============== --}}
+    <nav class="flex items-center gap-2 border-b border-[color:var(--color-bg-rule)]">
+        <button type="button" wire:click="setTab('overview')"
+                @class([
+                    'px-4 py-2.5 text-[12.5px] font-semibold border-b-2 transition-colors',
+                    'border-[color:var(--color-hub)] text-[color:var(--color-ink)]' => $activeTab === 'overview',
+                    'border-transparent text-[color:var(--color-ink-3)] hover:text-[color:var(--color-ink)]' => $activeTab !== 'overview',
+                ])>
+            {{ __('Überblick') }}
+        </button>
+        <button type="button" wire:click="setTab('contacts')"
+                @class([
+                    'px-4 py-2.5 text-[12.5px] font-semibold border-b-2 transition-colors',
+                    'border-[color:var(--color-hub)] text-[color:var(--color-ink)]' => $activeTab === 'contacts',
+                    'border-transparent text-[color:var(--color-ink-3)] hover:text-[color:var(--color-ink)]' => $activeTab !== 'contacts',
+                ])>
+            {{ __('Kontakte') }}
+        </button>
+    </nav>
+
+    @if ($activeTab === 'overview')
         <div class="grid gap-6 lg:grid-cols-2">
-            <flux:card>
-                <flux:heading size="lg" class="mb-4">{{ __('Kontaktinformationen') }}</flux:heading>
-                <div class="space-y-2">
-                    <flux:text>{{ $company->email ?: __('Keine E-Mail hinterlegt') }}</flux:text>
-                    <flux:text>{{ $company->phone ?: __('Kein Telefon hinterlegt') }}</flux:text>
-                    <flux:text>{{ $company->website ?: __('Keine Website hinterlegt') }}</flux:text>
+            <article class="panel">
+                <div class="panel-head">
+                    <span class="section-eyebrow">{{ __('Kontaktinformationen') }}</span>
                 </div>
-            </flux:card>
+                <dl class="p-5 space-y-2.5 text-[12.5px]">
+                    <div class="flex justify-between gap-2">
+                        <dt class="text-[color:var(--color-ink-3)]">{{ __('E-Mail') }}</dt>
+                        <dd class="text-[color:var(--color-ink)] text-right break-all">{{ $company->email ?: __('Keine E-Mail hinterlegt') }}</dd>
+                    </div>
+                    <div class="flex justify-between gap-2">
+                        <dt class="text-[color:var(--color-ink-3)]">{{ __('Telefon') }}</dt>
+                        <dd class="text-[color:var(--color-ink)]">{{ $company->phone ?: __('Kein Telefon hinterlegt') }}</dd>
+                    </div>
+                    <div class="flex justify-between gap-2">
+                        <dt class="text-[color:var(--color-ink-3)]">{{ __('Website') }}</dt>
+                        <dd class="text-[color:var(--color-ink)] text-right break-all">{{ $company->website ?: __('Keine Website hinterlegt') }}</dd>
+                    </div>
+                </dl>
+            </article>
 
-            <flux:card>
-                <flux:heading size="lg" class="mb-4">{{ __('Adresse') }}</flux:heading>
-                <div class="space-y-2">
-                    <flux:text>{{ $company->address ?: __('Keine Adresse hinterlegt') }}</flux:text>
-                    <flux:text>{{ $company->country_code ?: __('Kein Land hinterlegt') }}</flux:text>
+            <article class="panel">
+                <div class="panel-head">
+                    <span class="section-eyebrow">{{ __('Adresse') }}</span>
                 </div>
-            </flux:card>
+                <dl class="p-5 space-y-2.5 text-[12.5px]">
+                    <div class="flex justify-between gap-2">
+                        <dt class="text-[color:var(--color-ink-3)]">{{ __('Anschrift') }}</dt>
+                        <dd class="text-[color:var(--color-ink)] text-right whitespace-pre-line">{{ $company->address ?: __('Keine Adresse hinterlegt') }}</dd>
+                    </div>
+                    <div class="flex justify-between gap-2">
+                        <dt class="text-[color:var(--color-ink-3)]">{{ __('Land') }}</dt>
+                        <dd class="text-[color:var(--color-ink)]">{{ $company->country_code ?: __('Kein Land hinterlegt') }}</dd>
+                    </div>
+                </dl>
+            </article>
 
-            <flux:card class="lg:col-span-2">
-                <div class="mb-4 flex items-center justify-between">
-                    <flux:heading size="lg">{{ __('Aktuelle Pressemitteilungen') }}</flux:heading>
+            <article class="panel lg:col-span-2">
+                <div class="panel-head">
+                    <span class="section-eyebrow">{{ __('Aktuelle Pressemitteilungen') }}</span>
                     <flux:button size="sm" variant="ghost" href="{{ route('admin.press-releases.index', ['company' => $company->id]) }}" wire:navigate>
                         {{ __('Alle anzeigen') }}
                     </flux:button>
                 </div>
-
-                <div class="space-y-2">
-                    @forelse($recentPressReleases as $pressRelease)
-                        <a href="{{ route('admin.press-releases.show', $pressRelease->id) }}" wire:navigate class="block rounded-lg p-3 transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-900">
-                            <flux:text weight="medium">{{ $pressRelease->title ?? __('Ohne Titel') }}</flux:text>
-                            <flux:text class="text-sm text-zinc-500">{{ $pressRelease->created_at?->format('d.m.Y') ?? '-' }}</flux:text>
+                <div class="divide-y divide-[color:var(--color-bg-rule)]">
+                    @forelse ($recentPressReleases as $pressRelease)
+                        <a href="{{ route('admin.press-releases.show', $pressRelease->id) }}" wire:navigate
+                           class="flex items-center justify-between gap-3 px-5 py-3 hover:bg-[color:var(--color-bg-elev)] transition-colors">
+                            <span class="text-[13px] font-semibold text-[color:var(--color-ink)] truncate">
+                                {{ $pressRelease->title ?? __('Ohne Titel') }}
+                            </span>
+                            <span class="text-[11.5px] text-[color:var(--color-ink-3)] flex-shrink-0">
+                                {{ $pressRelease->created_at?->format('d.m.Y') ?? '-' }}
+                            </span>
                         </a>
                     @empty
-                        <flux:text class="text-sm text-zinc-500">{{ __('Keine Pressemitteilungen vorhanden') }}</flux:text>
+                        <div class="px-5 py-6 text-[12.5px] text-[color:var(--color-ink-3)]">
+                            {{ __('Keine Pressemitteilungen vorhanden') }}
+                        </div>
                     @endforelse
                 </div>
-            </flux:card>
+            </article>
         </div>
     @endif
 
-    @if($activeTab === 'contacts')
-        <flux:card>
-            <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                <flux:heading size="lg">{{ __('Ansprechpartner') }} ({{ $filteredContactsTotal }})</flux:heading>
-                <div class="flex w-full gap-2 sm:w-auto">
+    @if ($activeTab === 'contacts')
+        <article class="panel">
+            <div class="panel-head">
+                <span class="section-eyebrow">{{ __('Ansprechpartner') }}</span>
+                <span class="text-[11.5px] text-[color:var(--color-ink-3)]">
+                    {{ $filteredContactsTotal }} {{ __('Einträge') }}
+                </span>
+            </div>
+            <div class="p-5 space-y-4">
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                     <flux:input
                         wire:model.live.debounce.300ms="contactSearch"
                         placeholder="{{ __('Kontakte durchsuchen...') }}"
                         icon="magnifying-glass"
+                        class="flex-1"
                     />
                     @if (\Illuminate\Support\Facades\Route::has('admin.companies.contacts.create'))
                         <flux:button size="sm" icon="plus" href="{{ route('admin.companies.contacts.create', ['companyId' => $company->id]) }}" wire:navigate>
@@ -322,79 +391,86 @@ new #[Layout('components.layouts.app'), Title('Firma anzeigen')] class extends C
                         </flux:button>
                     @endif
                 </div>
-            </div>
 
-            <div class="mb-4 rounded-lg border border-zinc-200 p-3 dark:border-zinc-700">
-                <flux:heading size="sm" class="mb-2">{{ __('Bestehenden Kontakt zuordnen') }}</flux:heading>
-                <flux:select
-                    wire:model.live="selectedExistingContactId"
-                    variant="combobox"
-                    :filter="false"
-                    placeholder="{{ __('Kontakt suchen und auswählen…') }}"
-                >
-                    <x-slot name="input">
-                        <flux:select.input
-                            wire:model.live.debounce.300ms="contactLookup"
-                            placeholder="{{ __('Name oder E-Mail…') }}"
-                        />
-                    </x-slot>
-                    @foreach($contactLookupResults as $lookupContact)
-                        @php($lookupName = trim(($lookupContact->first_name ?? '').' '.($lookupContact->last_name ?? '')) ?: __('Kontakt ohne Name'))
-                        <flux:select.option :value="$lookupContact->id" wire:key="lc-{{ $lookupContact->id }}">
-                            {{ $lookupName }}
-                            <span class="text-zinc-400">
-                                @if($lookupContact->email)
-                                    · {{ $lookupContact->email }}
+                <div class="rounded-[5px] border border-[color:var(--color-bg-rule)] bg-[color:var(--color-bg-elev)] p-4">
+                    <div class="text-[11px] uppercase tracking-[0.6px] text-[color:var(--color-ink-3)] font-semibold mb-2">
+                        {{ __('Bestehenden Kontakt zuordnen') }}
+                    </div>
+                    <flux:select
+                        wire:model.live="selectedExistingContactId"
+                        variant="combobox"
+                        :filter="false"
+                        placeholder="{{ __('Kontakt suchen und auswählen…') }}"
+                    >
+                        <x-slot name="input">
+                            <flux:select.input
+                                wire:model.live.debounce.300ms="contactLookup"
+                                placeholder="{{ __('Name oder E-Mail…') }}"
+                            />
+                        </x-slot>
+                        @foreach ($contactLookupResults as $lookupContact)
+                            @php($lookupName = trim(($lookupContact->first_name ?? '').' '.($lookupContact->last_name ?? '')) ?: __('Kontakt ohne Name'))
+                            <flux:select.option :value="$lookupContact->id" wire:key="lc-{{ $lookupContact->id }}">
+                                {{ $lookupName }}
+                                <span class="text-[color:var(--color-ink-3)]">
+                                    @if ($lookupContact->email)
+                                        · {{ $lookupContact->email }}
+                                    @endif
+                                    · {{ $lookupContact->company?->name ?? __('Unbekannte Firma') }}
+                                </span>
+                            </flux:select.option>
+                        @endforeach
+                        <x-slot name="empty">
+                            <flux:select.option.empty>
+                                @if (blank(trim($contactLookup)))
+                                    {{ __('Mindestens 1 Zeichen eingeben…') }}
+                                @else
+                                    {{ __('Kein Kontakt gefunden.') }}
                                 @endif
-                                · {{ $lookupContact->company?->name ?? __('Unbekannte Firma') }}
-                            </span>
-                        </flux:select.option>
-                    @endforeach
-                    <x-slot name="empty">
-                        <flux:select.option.empty>
-                            @if(blank(trim($contactLookup)))
-                                {{ __('Mindestens 1 Zeichen eingeben…') }}
-                            @else
-                                {{ __('Kein Kontakt gefunden.') }}
-                            @endif
-                        </flux:select.option.empty>
-                    </x-slot>
-                </flux:select>
-            </div>
+                            </flux:select.option.empty>
+                        </x-slot>
+                    </flux:select>
+                </div>
 
-            <div class="space-y-3">
-                @forelse($filteredContacts as $contact)
-                    <div class="rounded-lg border border-zinc-200 p-3 dark:border-zinc-700">
-                        <div class="flex items-start justify-between gap-3">
-                            <div>
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <flux:text weight="semibold">
-                                        {{ trim(($contact->first_name ?? '').' '.($contact->last_name ?? '')) ?: __('Kontakt ohne Name') }}
-                                    </flux:text>
-                                    <flux:badge color="{{ $this->portalBadgeColor($contact->portal) }}" size="sm">
-                                        {{ $contact->portal?->label() ?? __('Unbekannt') }}
-                                    </flux:badge>
+                <div class="space-y-2">
+                    @forelse ($filteredContacts as $contact)
+                        <div class="rounded-[5px] border border-[color:var(--color-bg-rule)] bg-[color:var(--color-bg-elev)] p-3">
+                            <div class="flex items-start justify-between gap-3">
+                                <div class="min-w-0">
+                                    <div class="flex flex-wrap items-center gap-2">
+                                        <span class="text-[13px] font-semibold text-[color:var(--color-ink)]">
+                                            {{ trim(($contact->first_name ?? '').' '.($contact->last_name ?? '')) ?: __('Kontakt ohne Name') }}
+                                        </span>
+                                        <span class="badge hub">{{ $contact->portal?->label() ?? __('Unbekannt') }}</span>
+                                    </div>
+                                    <div class="text-[12px] text-[color:var(--color-ink-3)] mt-0.5">
+                                        {{ $contact->responsibility ?: __('Keine Rolle hinterlegt') }}
+                                    </div>
+                                    @if ($contact->email)
+                                        <a href="mailto:{{ $contact->email }}"
+                                           class="text-[12px] text-[color:var(--color-hub)] underline underline-offset-2 decoration-[color:var(--color-hub)]/40 hover:decoration-[color:var(--color-hub)] mt-0.5 inline-block">
+                                            {{ $contact->email }}
+                                        </a>
+                                    @endif
                                 </div>
-                                <flux:text class="text-sm text-zinc-500">{{ $contact->responsibility ?: __('Keine Rolle hinterlegt') }}</flux:text>
-                                @if($contact->email)
-                                    <flux:text class="text-sm text-blue-600 dark:text-blue-400">{{ $contact->email }}</flux:text>
+                                @if (\Illuminate\Support\Facades\Route::has('admin.contacts.edit'))
+                                    <flux:button size="sm" variant="ghost" icon="pencil" href="{{ route('admin.contacts.edit', $contact->id) }}" wire:navigate />
                                 @endif
                             </div>
-                            @if (\Illuminate\Support\Facades\Route::has('admin.contacts.edit'))
-                                <flux:button size="sm" variant="ghost" icon="pencil" href="{{ route('admin.contacts.edit', $contact->id) }}" wire:navigate />
-                            @endif
                         </div>
-                    </div>
-                @empty
-                    <flux:text class="text-sm text-zinc-500">{{ __('Keine Kontakte gefunden') }}</flux:text>
-                @endforelse
-            </div>
+                    @empty
+                        <div class="rounded-[5px] border border-dashed border-[color:var(--color-bg-rule)] p-4 text-[12.5px] text-[color:var(--color-ink-3)]">
+                            {{ __('Keine Kontakte gefunden') }}
+                        </div>
+                    @endforelse
+                </div>
 
-            @if($filteredContactsTotal > $filteredContacts->count())
-                <flux:text class="mt-3 block text-xs text-zinc-500">
-                    {{ __('Es werden die ersten :count Kontakte angezeigt. Bitte Suche eingrenzen, um weitere Treffer zu finden.', ['count' => $filteredContacts->count()]) }}
-                </flux:text>
-            @endif
-        </flux:card>
+                @if ($filteredContactsTotal > $filteredContacts->count())
+                    <p class="text-[11.5px] text-[color:var(--color-ink-3)] m-0">
+                        {{ __('Es werden die ersten :count Kontakte angezeigt. Bitte Suche eingrenzen, um weitere Treffer zu finden.', ['count' => $filteredContacts->count()]) }}
+                    </p>
+                @endif
+            </div>
+        </article>
     @endif
 </div>