b2in/resources/views/livewire/admin/cms/dashboard.blade.php

<?php

use App\Models\CmsArticle;
use App\Models\CmsBrand;
use App\Models\CmsReference;
use FluxCms\Core\Models\CmsContent;
use FluxCms\Core\Models\CmsMedia;
use function Livewire\Volt\{layout, title, computed};

layout('components.layouts.app');
title('CMS Dashboard');

$stats = computed(fn () => [
    'contents' => CmsContent::count(),
    'groups' => CmsContent::distinct()->pluck('group')->count(),
    'references' => CmsReference::count(),
    'references_published' => CmsReference::published()->count(),
    'articles' => CmsArticle::count(),
    'articles_published' => CmsArticle::published()->count(),
    'brands' => CmsBrand::count(),
    'brands_published' => CmsBrand::published()->count(),
    'media' => CmsMedia::count(),
]);

?>

<div>
    <div class="mb-6">
        <flux:heading size="xl">CMS</flux:heading>
        <flux:text class="mt-1">Inhalte, Referenzen, Marken, Magazin und Medien verwalten.</flux:text>
    </div>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <a href="{{ route('cms.content.index') }}" wire:navigate>
            <flux:card class="hover:border-blue-500 transition-colors">
                <div class="flex items-center gap-3">
                    <flux:icon name="document-text" class="text-blue-500" />
                    <div>
                        <flux:heading size="lg">{{ $this->stats['contents'] }}</flux:heading>
                        <flux:text class="text-sm">Inhalte in {{ $this->stats['groups'] }} Gruppen</flux:text>
                    </div>
                </div>
            </flux:card>
        </a>

        <a href="{{ route('cms.references.index') }}" wire:navigate>
            <flux:card class="hover:border-emerald-500 transition-colors">
                <div class="flex items-center gap-3">
                    <flux:icon name="photo" class="text-emerald-500" />
                    <div>
                        <flux:heading size="lg">{{ $this->stats['references'] }}</flux:heading>
                        <flux:text class="text-sm">Referenzen ({{ $this->stats['references_published'] }} veröffentlicht)</flux:text>
                    </div>
                </div>
            </flux:card>
        </a>

        <a href="{{ route('cms.articles.index') }}" wire:navigate>
            <flux:card class="hover:border-amber-500 transition-colors">
                <div class="flex items-center gap-3">
                    <flux:icon name="newspaper" class="text-amber-500" />
                    <div>
                        <flux:heading size="lg">{{ $this->stats['articles'] }}</flux:heading>
                        <flux:text class="text-sm">Magazin-Artikel ({{ $this->stats['articles_published'] }} veröffentlicht)</flux:text>
                    </div>
                </div>
            </flux:card>
        </a>

        <a href="{{ route('cms.brands.index') }}" wire:navigate>
            <flux:card class="hover:border-emerald-500 transition-colors">
                <div class="flex items-center gap-3">
                    <flux:icon name="building-storefront" class="text-emerald-500" />
                    <div>
                        <flux:heading size="lg">{{ $this->stats['brands'] }}</flux:heading>
                        <flux:text class="text-sm">Kernmarken ({{ $this->stats['brands_published'] }} veröffentlicht)</flux:text>
                    </div>
                </div>
            </flux:card>
        </a>

        <a href="{{ route('cms.media.index') }}" wire:navigate>
            <flux:card class="hover:border-violet-500 transition-colors">
                <div class="flex items-center gap-3">
                    <flux:icon name="photo" class="text-violet-500" />
                    <div>
                        <flux:heading size="lg">{{ $this->stats['media'] }}</flux:heading>
                        <flux:text class="text-sm">Medien</flux:text>
                    </div>
                </div>
            </flux:card>
        </a>
    </div>

    <flux:card class="mt-6 max-w-4xl">
        <flux:heading size="lg" class="mb-4">So funktioniert das CMS</flux:heading>
        <div class="space-y-5 text-sm text-zinc-600 dark:text-zinc-400">

            <div>
                <flux:heading size="sm" class="mb-1 flex items-center gap-2">
                    <flux:icon name="squares-2x2" class="size-4 text-zinc-500" />
                    Aufbau & Navigation
                </flux:heading>
                <p>
                    Das CMS ist die zentrale Stelle, um alle Inhalte der öffentlichen Website zu pflegen.
                    Es gliedert sich in vier Module, die Sie über die Kacheln oben erreichen:
                </p>
                <ul class="mt-2 ml-5 list-disc space-y-1">
                    <li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Inhalte</strong> – Texte, Abschnitte und strukturierte Daten der Website (z.&nbsp;B. Startseite, Netzwerk, rechtliche Texte). Inhalte sind in <em>Gruppen</em> organisiert, sodass zusammengehörige Felder gebündelt bearbeitet werden können.</li>
                    <li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Referenzen</strong> – Realisierte Projekte für die Seite /referenzen mit Titelbild, weiteren Bildern und den beteiligten Marken. Nur ausgeführte Aufträge; Entwürfe gehören in die Galerie der Marke.</li>
                    <li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Magazin</strong> – Redaktionelle Artikel (z.&nbsp;B. über Dubai-Immobilien, Supply-Chain oder Einrichtung). Artikel unterstützen Kategorien, Autoren und Lesezeiten.</li>
                    <li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Medien</strong> – Zentrale Bild- und Dateiverwaltung. Alle Uploads landen hier und können in jedem Modul wiederverwendet werden.</li>
                </ul>
            </div>

            <flux:separator />

            <div>
                <flux:heading size="sm" class="mb-1 flex items-center gap-2">
                    Medienbibliothek & Bildfelder
                </flux:heading>
                <p>
                    Jede Datei, die auf der Website erscheint, wird in der <strong class="font-medium text-zinc-800 dark:text-zinc-200">Medienbibliothek</strong> verwaltet.
                    Sie haben zwei Wege, Dateien hochzuladen:
                </p>
                <ol class="mt-2 ml-5 list-decimal space-y-1">
                    <li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Vorab</strong> – Im Modul „Medien" Dateien hochladen, mit Titel und Alt-Text versehen und organisieren.</li>
                    <li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Im Kontext</strong> – Beim Bearbeiten eines Inhalts, Projekts oder Artikels auf „Bild auswählen" klicken. Im Auswahldialog können Sie ein bestehendes Medium wählen <em>oder</em> per Drag-and-drop direkt hochladen. Dieser Schnell-Upload wird automatisch in der Medienbibliothek gespeichert.</li>
                </ol>
                <p class="mt-2">
                    Egal welchen Weg Sie wählen: Es gibt immer einen zentralen Bibliothekseintrag. So behalten Sie den Überblick und können dasselbe Bild an mehreren Stellen einsetzen.
                </p>
            </div>

            <flux:separator />

            <div>
                <flux:heading size="sm" class="mb-1 flex items-center gap-2">
                    <flux:icon name="document-text" class="size-4 text-blue-500" />
                    Inhalte bearbeiten
                </flux:heading>
                <p>
                    Inhalte sind nach <strong class="font-medium text-zinc-800 dark:text-zinc-200">Gruppen</strong> geordnet – z.&nbsp;B. <em>homepage</em>, <em>netzwerk</em>, <em>legal</em>.
                    Innerhalb einer Gruppe sehen Sie die einzelnen Felder (Texte, Rich-Text, Bilder oder JSON-Strukturen).
                </p>
                <ul class="mt-2 ml-5 list-disc space-y-1">
                    <li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Mehrsprachigkeit:</strong> Wo mehrere Sprachen vorgesehen sind, wählen Sie die gewünschte Sprache (DE / EN) im Editor. Jede Sprachversion wird einzeln gespeichert.</li>
                    <li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Sofort live:</strong> Gespeicherte Änderungen erscheinen auf der öffentlichen Website, sobald die jeweilige Seite den entsprechenden CMS-Key einbindet – ein zusätzliches „Veröffentlichen" ist nicht nötig.</li>
                </ul>
            </div>

            <flux:separator />

            <div>
                <flux:heading size="sm" class="mb-1 flex items-center gap-2">
                    <flux:icon name="building-office" class="size-4 text-emerald-500" />
                    Projekte & Magazin verwalten
                </flux:heading>
                <p>
                    Projekte und Magazin-Artikel sind eigenständige Einträge mit eigenem Lebenszyklus:
                </p>
                <ul class="mt-2 ml-5 list-disc space-y-1">
                    <li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Entwurf / Veröffentlicht:</strong> Neue Einträge starten als Entwurf. Erst nach dem Veröffentlichen sind sie auf der Website sichtbar. Sie können Einträge jederzeit wieder auf „Entwurf" setzen, um sie temporär auszublenden.</li>
                    <li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Reihenfolge:</strong> Über das Sortierfeld steuern Sie, in welcher Reihenfolge Projekte und Artikel auf der Website erscheinen (z.&nbsp;B. Portfolio-Listen, Magazin-Übersicht).</li>
                    <li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Bilder:</strong> Projekt- und Artikelbilder werden über die Medienauswahl zugeordnet (siehe oben).</li>
                </ul>
            </div>

        </div>
    </flux:card>
</div>