Initial commit: CABM-IT (ItGlue-style MSP documentation platform)

Laravel 13 + Livewire/Volt app for managing client organizations,
documents, passwords, flexible assets, virtual machines, contacts,
domains, todos, shortcuts, and role-based user administration.

resources/views/components/documents/version-history.blade.php

@@ -0,0 +1,25 @@
+@props(['document'])
+
+<div class="mt-8">
+    <h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-500">Historique des versions</h2>
+    <div class="overflow-hidden rounded border border-slate-200 bg-white">
+        <table class="min-w-full divide-y divide-slate-200 text-sm">
+            <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
+                <tr>
+                    <th class="px-4 py-2">Version</th>
+                    <th class="px-4 py-2">Par</th>
+                    <th class="px-4 py-2">Quand</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100">
+                @foreach ($document->versions as $version)
+                    <tr>
+                        <td class="px-4 py-2 text-slate-900">v{{ $version->version }}</td>
+                        <td class="px-4 py-2 text-slate-600">{{ $version->creator?->name ?? 'système' }}</td>
+                        <td class="px-4 py-2 text-slate-500">{{ $version->created_at->diffForHumans() }}</td>
+                    </tr>
+                @endforeach
+            </tbody>
+        </table>
+    </div>
+</div>

resources/views/components/documents/⚡form.blade.php

@@ -0,0 +1,109 @@
+<?php
+
+use App\Models\Document;
+use App\Models\Organization;
+use Livewire\Component;
+
+new class extends Component
+{
+    public Organization $organization;
+    public ?Document $document = null;
+
+    public string $name = '';
+    public string $content = '';
+    public ?int $folder_id = null;
+
+    public function mount(Organization $organization, ?Document $document = null, ?int $folder = null): void
+    {
+        $this->organization = $organization;
+
+        if ($document?->exists) {
+            $this->document = $document;
+            $this->name = $document->name;
+            $this->content = $document->content ?? '';
+            $this->folder_id = $document->folder_id;
+        } else {
+            $this->folder_id = $folder;
+        }
+    }
+
+    public function save(): void
+    {
+        $validated = $this->validate([
+            'name' => 'required|string|max:255',
+            'content' => 'nullable|string',
+        ]);
+
+        if ($this->document?->exists) {
+            $contentChanged = $this->document->content !== $this->content;
+
+            $this->document->update($validated);
+
+            if ($contentChanged) {
+                $this->document->increment('current_version');
+                $this->document->versions()->create([
+                    'version' => $this->document->current_version,
+                    'content' => $this->content,
+                    'created_by' => auth()->id(),
+                ]);
+            }
+
+            session()->flash('status', "\"{$this->document->name}\" mis à jour.");
+        } else {
+            $created = $this->organization->documents()->create([
+                ...$validated,
+                'folder_id' => $this->folder_id,
+                'created_by' => auth()->id(),
+            ]);
+
+            $created->versions()->create([
+                'version' => 1,
+                'content' => $this->content,
+                'created_by' => auth()->id(),
+            ]);
+
+            session()->flash('status', "\"{$this->name}\" créé.");
+        }
+
+        $this->redirectRoute('organizations.documents.index', [$this->organization, 'folder' => $this->folder_id], navigate: true);
+    }
+};
+?>
+
+<div class="max-w-3xl">
+    <p class="text-sm text-slate-500">{{ $organization->name }}</p>
+    <h1 class="mb-6 text-2xl font-semibold text-slate-900">
+        {{ $document?->exists ? 'Modifier le document' : 'Nouveau document' }}
+    </h1>
+
+    <form wire:submit="save" class="space-y-4 rounded border border-slate-200 bg-white p-6">
+        <div>
+            <label class="block text-sm font-medium text-slate-700">Nom</label>
+            <input type="text" wire:model="name"
+                   class="mt-1 w-full rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
+            @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
+        </div>
+
+        <div>
+            <label class="block text-sm font-medium text-slate-700">Contenu</label>
+            <textarea wire:model="content" rows="14"
+                      class="mt-1 w-full rounded border-slate-300 font-mono text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500"></textarea>
+        </div>
+
+        <div class="flex items-center gap-3 pt-2">
+            <button type="submit"
+                    class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
+                Enregistrer
+            </button>
+            <a href="{{ route('organizations.documents.index', [$organization, 'folder' => $folder_id]) }}" class="text-sm text-slate-500 hover:text-slate-900">Annuler</a>
+        </div>
+    </form>
+
+    @if ($document?->exists)
+        <x-documents.version-history :document="$document" />
+
+        <div class="mt-8">
+            <livewire:related-items.panel :organization="$organization" :item="$document" :key="'related-'.$document->id" />
+        </div>
+    @endif
+</div>

resources/views/components/documents/⚡index.blade.php

@@ -0,0 +1,384 @@
+<?php
+
+use App\Models\Document;
+use App\Models\Organization;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+use Livewire\Attributes\Url;
+use Livewire\Component;
+use Livewire\WithFileUploads;
+
+new class extends Component
+{
+    use WithFileUploads;
+
+    const OFFICE_EXTENSIONS = ['docx', 'xlsx'];
+    const UPLOAD_EXTENSIONS = ['pdf', 'txt', 'md'];
+
+    public Organization $organization;
+
+    #[Url]
+    public ?int $folderId = null;
+
+    public string $newFolderName = '';
+    public bool $showNewFolder = false;
+
+    public $uploadedFile = null;
+
+    public function createFolder(): void
+    {
+        $this->validate(['newFolderName' => 'required|string|max:255']);
+
+        $this->organization->documents()->create([
+            'folder_id' => $this->folderId,
+            'name' => $this->newFolderName,
+            'is_folder' => true,
+            'created_by' => auth()->id(),
+        ]);
+
+        $this->newFolderName = '';
+        $this->showNewFolder = false;
+    }
+
+    public function createMarkdownDocument(): void
+    {
+        $document = $this->organization->documents()->create([
+            'folder_id' => $this->folderId,
+            'name' => 'Document sans titre',
+            'type' => 'markdown',
+            'content' => '',
+            'created_by' => auth()->id(),
+        ]);
+
+        $document->versions()->create([
+            'version' => 1,
+            'content' => '',
+            'created_by' => auth()->id(),
+        ]);
+
+        $this->redirectRoute('organizations.documents.edit', [$this->organization, $document, 'edit' => true], navigate: true);
+    }
+
+    public function createOfficeDocument(string $extension): void
+    {
+        abort_unless(in_array($extension, ['docx', 'xlsx'], true), 400);
+
+        $name = $extension === 'xlsx' ? 'Feuille de calcul sans titre' : 'Document sans titre';
+
+        $document = $this->organization->documents()->create([
+            'folder_id' => $this->folderId,
+            'name' => $name,
+            'type' => 'office',
+            'office_extension' => $extension,
+            'office_key' => Str::random(20),
+            'created_by' => auth()->id(),
+        ]);
+
+        $document->file_path = "documents/office/{$this->organization->id}/{$document->id}.{$extension}";
+        Storage::put($document->file_path, file_get_contents(resource_path("office-templates/blank.{$extension}")));
+        $document->save();
+
+        $document->versions()->create([
+            'version' => 1,
+            'created_by' => auth()->id(),
+        ]);
+
+        $this->redirectRoute('organizations.documents.edit', [$this->organization, $document, 'edit' => true], navigate: true);
+    }
+
+    public function updatedUploadedFile(): void
+    {
+        $this->validate([
+            'uploadedFile' => 'required|file|max:51200|mimes:'.implode(',', [...self::OFFICE_EXTENSIONS, ...self::UPLOAD_EXTENSIONS]),
+        ]);
+
+        $extension = strtolower($this->uploadedFile->getClientOriginalExtension());
+        $originalName = $this->uploadedFile->getClientOriginalName();
+
+        $isOffice = in_array($extension, self::OFFICE_EXTENSIONS, true);
+
+        $document = $this->organization->documents()->create([
+            'folder_id' => $this->folderId,
+            'name' => $originalName,
+            'type' => $isOffice ? 'office' : 'upload',
+            'office_extension' => $isOffice ? $extension : null,
+            'office_key' => $isOffice ? Str::random(20) : null,
+            'created_by' => auth()->id(),
+        ]);
+
+        $storedPath = $isOffice
+            ? "documents/office/{$this->organization->id}/{$document->id}.{$extension}"
+            : "documents/uploads/{$this->organization->id}/{$document->id}.{$extension}";
+
+        Storage::put($storedPath, file_get_contents($this->uploadedFile->getRealPath()));
+        $document->update(['file_path' => $storedPath]);
+
+        $document->versions()->create([
+            'version' => 1,
+            'created_by' => auth()->id(),
+        ]);
+
+        $this->uploadedFile = null;
+
+        session()->flash('status', "\"{$originalName}\" importé.");
+    }
+
+    public function delete(int $documentId): void
+    {
+        $document = $this->organization->documents()->findOrFail($documentId);
+        $document->delete();
+
+        session()->flash('status', "\"{$document->name}\" supprimé.");
+    }
+
+    public function moveDocument(int $documentId, ?int $targetFolderId): void
+    {
+        $document = $this->organization->documents()->findOrFail($documentId);
+
+        if ($document->id === $targetFolderId) {
+            return;
+        }
+
+        if ($targetFolderId !== null) {
+            $targetFolder = $this->organization->documents()->find($targetFolderId);
+
+            if (! $targetFolder || ! $targetFolder->isFolder()) {
+                return;
+            }
+
+            // Prevent moving a folder into itself or one of its own descendants.
+            if ($document->isFolder()) {
+                $walk = $targetFolder;
+                while ($walk) {
+                    if ($walk->id === $document->id) {
+                        return;
+                    }
+                    $walk = $walk->folder;
+                }
+            }
+        }
+
+        if ($document->folder_id === $targetFolderId) {
+            return;
+        }
+
+        $document->update(['folder_id' => $targetFolderId]);
+
+        session()->flash('status', "\"{$document->name}\" déplacé.");
+    }
+
+    /**
+     * All folders as a flat list ordered depth-first (parent immediately
+     * followed by its children), each annotated with its nesting depth so
+     * the "move to" dropdown can render indentation reflecting the tree.
+     *
+     * @return \Illuminate\Support\Collection<int, array{folder: Document, depth: int}>
+     */
+    private function folderTree(\Illuminate\Support\Collection $allFolders): \Illuminate\Support\Collection
+    {
+        $byParent = $allFolders->groupBy('folder_id');
+
+        $walk = function ($parentId, $depth) use (&$walk, $byParent) {
+            return ($byParent->get($parentId) ?? collect())
+                ->sortBy('name')
+                ->flatMap(fn ($folder) => collect([['folder' => $folder, 'depth' => $depth]])
+                    ->concat($walk($folder->id, $depth + 1)));
+        };
+
+        return $walk(null, 0);
+    }
+
+    public function with(): array
+    {
+        $currentFolder = $this->folderId ? $this->organization->documents()->find($this->folderId) : null;
+
+        $breadcrumbs = collect();
+        $walk = $currentFolder;
+        while ($walk) {
+            $breadcrumbs->prepend($walk);
+            $walk = $walk->folder;
+        }
+
+        $allFolders = $this->organization->documents()->where('is_folder', true)->get();
+
+        return [
+            'currentFolder' => $currentFolder,
+            'breadcrumbs' => $breadcrumbs,
+            'items' => $this->organization->documents()
+                ->where('folder_id', $this->folderId)
+                ->orderByDesc('is_folder')
+                ->orderBy('name')
+                ->get(),
+            'folderTree' => $this->folderTree($allFolders),
+        ];
+    }
+};
+?>
+
+<div>
+    <div class="mb-6 flex items-center justify-between">
+        <div>
+            <p class="text-sm text-slate-500">{{ $organization->name }}</p>
+            <h1 class="text-2xl font-semibold text-slate-900">Documents</h1>
+        </div>
+        <div class="flex gap-2">
+            <button type="button" wire:click="$set('showNewFolder', true)" title="Nouveau dossier"
+                    class="flex h-10 w-10 items-center justify-center rounded border border-slate-300 text-lg hover:bg-slate-50">
+                📁
+            </button>
+            <a href="{{ route('organizations.documents.create', [$organization, 'folder' => $folderId]) }}" title="Nouveau document texte"
+               class="flex h-10 w-10 items-center justify-center rounded border border-slate-300 text-lg hover:bg-slate-50">
+                📄
+            </a>
+            <button type="button" wire:click="createMarkdownDocument" title="Nouveau document Markdown"
+                    class="flex h-10 w-10 items-center justify-center rounded border border-slate-300 text-lg hover:bg-slate-50">
+                📝
+            </button>
+            <button type="button" wire:click="createOfficeDocument('docx')" title="Nouveau document Word"
+                    class="flex h-10 w-10 items-center justify-center rounded bg-slate-900 text-lg hover:bg-slate-700">
+                📘
+            </button>
+            <button type="button" wire:click="createOfficeDocument('xlsx')" title="Nouvelle feuille de calcul"
+                    class="flex h-10 w-10 items-center justify-center rounded bg-emerald-700 text-lg hover:bg-emerald-800">
+                📊
+            </button>
+            <label title="Importer un fichier (xlsx, docx, pdf, txt, md)"
+                   class="flex h-10 w-10 cursor-pointer items-center justify-center rounded border border-slate-300 text-lg hover:bg-slate-50">
+                📤
+                <input type="file" wire:model="uploadedFile" accept=".xlsx,.docx,.pdf,.txt,.md" class="hidden">
+            </label>
+        </div>
+    </div>
+
+    <div wire:loading wire:target="uploadedFile" class="mb-4 text-sm text-slate-500">
+        Import en cours...
+    </div>
+    @error('uploadedFile') <div class="mb-4 rounded border border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700">{{ $message }}</div> @enderror
+
+    <div class="mb-4 flex items-center gap-1 text-sm text-slate-500">
+        <a wire:click="$set('folderId', null)" href="#" class="hover:text-slate-900">Documents</a>
+        @foreach ($breadcrumbs as $crumb)
+            <span>/</span>
+            <a wire:click="$set('folderId', {{ $crumb->id }})" href="#" class="hover:text-slate-900">{{ $crumb->name }}</a>
+        @endforeach
+    </div>
+
+    @if ($showNewFolder)
+        <form wire:submit="createFolder" class="mb-4 flex items-center gap-2 rounded border border-slate-200 bg-white p-3">
+            <input type="text" wire:model="newFolderName" placeholder="Nom du dossier" autofocus
+                   class="flex-1 rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
+            <button type="submit" class="rounded bg-slate-900 px-3 py-1.5 text-sm text-white hover:bg-slate-700">Créer</button>
+            <button type="button" wire:click="$set('showNewFolder', false)" class="text-sm text-slate-500 hover:text-slate-900">Annuler</button>
+            @error('newFolderName') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
+        </form>
+    @endif
+
+    @if ($items->isNotEmpty())
+        <p class="mb-2 text-xs text-slate-400">Astuce : glissez-déposez un élément sur un dossier pour le déplacer.</p>
+    @endif
+
+    <div class="overflow-hidden rounded border border-slate-200 bg-white" x-data="{ draggingId: null, overId: null }">
+        <table class="min-w-full divide-y divide-slate-200 text-sm">
+            <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
+                <tr>
+                    <th class="px-4 py-3">Nom</th>
+                    <th class="px-4 py-3">Version</th>
+                    <th class="px-4 py-3">Mis à jour</th>
+                    <th class="px-4 py-3"></th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100">
+                @forelse ($items as $item)
+                    @php $isFolder = $item->isFolder(); @endphp
+                    <tr wire:key="doc-{{ $item->id }}"
+                        draggable="true"
+                        x-on:dragstart="draggingId = {{ $item->id }}"
+                        x-on:dragend="draggingId = null; overId = null"
+                        @if ($isFolder)
+                            x-on:dragover.prevent="if (draggingId !== {{ $item->id }}) overId = {{ $item->id }}"
+                            x-on:dragleave="if (overId === {{ $item->id }}) overId = null"
+                            x-on:drop.prevent="if (draggingId && draggingId !== {{ $item->id }}) { $wire.moveDocument(draggingId, {{ $item->id }}); } draggingId = null; overId = null"
+                        @endif
+                        :class="draggingId === {{ $item->id }} ? 'opacity-40' : (overId === {{ $item->id }} ? 'bg-slate-100 ring-1 ring-inset ring-slate-400' : '')"
+                        class="cursor-move">
+                        <td class="px-4 py-3">
+                            @if ($isFolder)
+                                <a wire:click="$set('folderId', {{ $item->id }})" href="#" class="font-medium text-slate-900 hover:underline">
+                                    📁 {{ $item->name }}
+                                </a>
+                            @else
+                                <a href="{{ route('organizations.documents.edit', [$organization, $item]) }}" class="font-medium text-slate-900 hover:underline">
+                                    {{ match(true) {
+                                        $item->office_extension === 'xlsx' => '📊',
+                                        $item->type === 'markdown' => '📝',
+                                        $item->type === 'upload' => '📎',
+                                        default => '📄',
+                                    } }} {{ $item->name }}
+                                </a>
+                            @endif
+                        </td>
+                        <td class="px-4 py-3 text-slate-600">{{ $isFolder ? '—' : 'v'.$item->current_version }}</td>
+                        <td class="px-4 py-3 text-slate-600">{{ $item->updated_at->diffForHumans() }}</td>
+                        <td class="px-4 py-3 text-right whitespace-nowrap">
+                            @unless ($isFolder)
+                                <a href="{{ route('organizations.documents.edit', [$organization, $item, 'edit' => true]) }}" class="text-slate-500 hover:text-slate-900">
+                                    {{ $item->type === 'upload' ? 'Ouvrir' : 'Modifier' }}
+                                </a>
+                            @endunless
+                            @php
+                                // Exclude the item's own subtree (if it's a folder) so it can't be moved into itself or a descendant.
+                                $excludedIds = [$item->id, $item->folder_id];
+                                if ($isFolder) {
+                                    $stack = [$item->id];
+                                    while ($stack) {
+                                        $id = array_pop($stack);
+                                        foreach ($folderTree as $node) {
+                                            if ($node['folder']->folder_id === $id) {
+                                                $excludedIds[] = $node['folder']->id;
+                                                $stack[] = $node['folder']->id;
+                                            }
+                                        }
+                                    }
+                                }
+                                $moveTargets = $folderTree->reject(fn ($node) => in_array($node['folder']->id, $excludedIds, true));
+                            @endphp
+                            @if ($moveTargets->isNotEmpty() || $item->folder_id !== null)
+                                <select wire:change="moveDocument({{ $item->id }}, $event.target.value === '' ? null : $event.target.value)"
+                                        class="ml-3 rounded border-slate-300 text-xs shadow-sm focus:border-slate-500 focus:ring-slate-500"
+                                        onclick="event.stopPropagation()">
+                                    <option value="" selected disabled>Déplacer vers...</option>
+                                    @if ($item->folder_id !== null)
+                                        <option value="">🏠 Racine</option>
+                                    @endif
+                                    @foreach ($moveTargets as $node)
+                                        <option value="{{ $node['folder']->id }}">{{ str_repeat('　', $node['depth']) }}{{ $node['depth'] > 0 ? '└ ' : '' }}📁 {{ $node['folder']->name }}</option>
+                                    @endforeach
+                                </select>
+                            @endif
+                            <button type="button"
+                                    wire:click="delete({{ $item->id }})"
+                                    wire:confirm="Supprimer ce {{ $isFolder ? 'dossier' : 'document' }} ? Cette action est irréversible."
+                                    class="ml-3 text-red-500 hover:text-red-700">
+                                Supprimer
+                            </button>
+                        </td>
+                    </tr>
+                @empty
+                    <tr>
+                        <td colspan="4" class="px-4 py-6 text-center text-slate-400">Dossier vide.</td>
+                    </tr>
+                @endforelse
+            </tbody>
+        </table>
+
+        @if ($currentFolder)
+            <div class="border-t border-slate-200 px-4 py-3 text-sm text-slate-500"
+                 x-on:dragover.prevent="overId = 'up'"
+                 x-on:dragleave="if (overId === 'up') overId = null"
+                 x-on:drop.prevent="if (draggingId) { $wire.moveDocument(draggingId, {{ $currentFolder->folder_id ?? 'null' }}); } draggingId = null; overId = null"
+                 :class="overId === 'up' ? 'bg-slate-100 ring-1 ring-inset ring-slate-400' : ''">
+                ⬆️ Glisser ici pour remonter au dossier parent
+            </div>
+        @endif
+    </div>
+</div>

resources/views/components/documents/⚡markdown-editor.blade.php

@@ -0,0 +1,153 @@
+<?php
+
+use App\Models\Document;
+use App\Models\Organization;
+use Livewire\Attributes\Url;
+use Livewire\Component;
+
+new class extends Component
+{
+    public Organization $organization;
+    public Document $document;
+
+    #[Url]
+    public bool $edit = false;
+
+    public string $name = '';
+    public string $content = '';
+    public bool $showPreview = false;
+
+    public function mount(Organization $organization, Document $document): void
+    {
+        abort_unless($document->isMarkdown(), 404);
+
+        $this->organization = $organization;
+        $this->document = $document;
+        $this->name = $document->name;
+        $this->content = $document->content ?? '';
+    }
+
+    public function save(): void
+    {
+        $validated = $this->validate([
+            'name' => 'required|string|max:255',
+            'content' => 'nullable|string',
+        ]);
+
+        $contentChanged = $this->document->content !== $this->content;
+
+        $this->document->update($validated);
+
+        if ($contentChanged) {
+            $this->document->increment('current_version');
+            $this->document->versions()->create([
+                'version' => $this->document->current_version,
+                'content' => $this->content,
+                'created_by' => auth()->id(),
+            ]);
+        }
+
+        session()->flash('status', "\"{$this->document->name}\" mis à jour.");
+        $this->edit = false;
+    }
+
+    public function renderedPreview(): string
+    {
+        return (new League\CommonMark\CommonMarkConverter())->convert($this->content ?? '')->getContent();
+    }
+};
+?>
+
+<div class="max-w-5xl">
+    <p class="text-sm text-slate-500">{{ $organization->name }}</p>
+
+    <div class="mb-6 flex items-center justify-between">
+        <h1 class="text-2xl font-semibold text-slate-900">{{ $document->name }}</h1>
+
+        <div class="flex items-center gap-4">
+            @unless ($edit)
+                <button type="button" wire:click="$set('edit', true)"
+                        class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
+                    Modifier
+                </button>
+            @endunless
+            <a href="{{ route('organizations.documents.index', [$organization, 'folder' => $document->folder_id]) }}"
+               class="text-sm text-slate-500 hover:text-slate-900">Retour</a>
+        </div>
+    </div>
+
+    @if (! $edit)
+        <div class="prose prose-sm max-w-none rounded border border-slate-200 bg-white p-6">
+            @if (trim($document->content ?? '') === '')
+                <p class="text-sm text-slate-400 italic">Ce document est vide.</p>
+            @else
+                {!! $this->renderedPreview() !!}
+            @endif
+        </div>
+    @else
+        <form wire:submit="save" class="space-y-4 rounded border border-slate-200 bg-white p-6">
+            <div>
+                <label class="block text-sm font-medium text-slate-700">Nom</label>
+                <input type="text" wire:model="name"
+                       class="mt-1 w-full rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
+                @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
+            </div>
+
+            <div>
+                <div class="mb-1 flex items-center justify-between">
+                    <label class="block text-sm font-medium text-slate-700">Contenu (Markdown)</label>
+                    <button type="button" wire:click="$toggle('showPreview')" class="text-sm text-slate-500 hover:text-slate-900">
+                        {{ $showPreview ? 'Masquer l\'aperçu' : 'Afficher l\'aperçu' }}
+                    </button>
+                </div>
+
+                <details class="mb-3 rounded border border-slate-200 bg-slate-50 text-sm">
+                    <summary class="cursor-pointer select-none px-3 py-2 font-medium text-slate-600 hover:text-slate-900">
+                        Aide-mémoire syntaxe Markdown
+                    </summary>
+                    <div class="grid grid-cols-1 gap-x-6 gap-y-1 border-t border-slate-200 px-3 py-3 font-mono text-xs text-slate-600 sm:grid-cols-2">
+                        <div># Titre 1</div>
+                        <div>## Titre 2</div>
+                        <div>**gras**</div>
+                        <div>*italique*</div>
+                        <div>~~barré~~</div>
+                        <div>`code`</div>
+                        <div>[texte](https://exemple.com)</div>
+                        <div>![alt](image.png)</div>
+                        <div>- élément de liste</div>
+                        <div>1. élément numéroté</div>
+                        <div>&gt; citation</div>
+                        <div>---  (ligne horizontale)</div>
+                        <div>```<br>bloc de code<br>```</div>
+                        <div>| A | B |<br>|---|---|<br>| 1 | 2 |</div>
+                    </div>
+                </details>
+
+                <div class="grid gap-4 {{ $showPreview ? 'grid-cols-2' : 'grid-cols-1' }}">
+                    <textarea wire:model.live.debounce.500ms="content" rows="20"
+                              class="w-full rounded border-slate-300 font-mono text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500"></textarea>
+
+                    @if ($showPreview)
+                        <div class="prose prose-sm max-w-none rounded border border-slate-200 bg-slate-50 p-4">
+                            {!! $this->renderedPreview() !!}
+                        </div>
+                    @endif
+                </div>
+            </div>
+
+            <div class="flex items-center gap-3 pt-2">
+                <button type="submit"
+                        class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
+                    Enregistrer
+                </button>
+                <button type="button" wire:click="$set('edit', false)" class="text-sm text-slate-500 hover:text-slate-900">Annuler</button>
+            </div>
+        </form>
+    @endif
+
+    <x-documents.version-history :document="$document" />
+
+    <div class="mt-8">
+        <livewire:related-items.panel :organization="$organization" :item="$document" :key="'related-'.$document->id" />
+    </div>
+</div>

resources/views/components/documents/⚡office-editor.blade.php

@@ -0,0 +1,118 @@
+<?php
+
+use App\Models\Document;
+use App\Models\Organization;
+use App\Services\OnlyOffice\DocumentConfigBuilder;
+use Livewire\Attributes\Url;
+use Livewire\Component;
+
+new class extends Component
+{
+    public Organization $organization;
+    public Document $document;
+
+    #[Url]
+    public bool $edit = false;
+
+    public array $editorConfig = [];
+
+    public bool $renaming = false;
+    public string $name = '';
+
+    public function mount(Organization $organization, Document $document, DocumentConfigBuilder $configBuilder): void
+    {
+        abort_unless($document->isOffice(), 404);
+
+        $this->organization = $organization;
+        $this->document = $document;
+        $this->name = $document->name;
+        $this->editorConfig = $configBuilder->build($document, auth()->user(), editable: $this->edit);
+    }
+
+    public function rename(): void
+    {
+        $validated = $this->validate(['name' => 'required|string|max:255']);
+
+        $this->document->update($validated);
+        $this->renaming = false;
+    }
+};
+?>
+
+<div>
+    <p class="text-sm text-slate-500">{{ $organization->name }}</p>
+    <div class="mb-6 flex items-center justify-between">
+        @if ($renaming)
+            <form wire:submit="rename" class="flex items-center gap-2">
+                <input type="text" wire:model="name" autofocus
+                       class="rounded border-slate-300 text-2xl font-semibold shadow-sm focus:border-slate-500 focus:ring-slate-500">
+                <button type="submit" class="rounded bg-slate-900 px-3 py-1.5 text-sm text-white hover:bg-slate-700">Enregistrer</button>
+                <button type="button" wire:click="$set('renaming', false)" class="text-sm text-slate-500 hover:text-slate-900">Annuler</button>
+                @error('name') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
+            </form>
+        @else
+            <button type="button" wire:click="$set('renaming', true)" class="group flex items-center gap-2">
+                <h1 class="text-2xl font-semibold text-slate-900">{{ $document->name }}</h1>
+                <span class="text-sm text-slate-400 opacity-0 group-hover:opacity-100">Renommer</span>
+            </button>
+        @endif
+        <div class="flex items-center gap-4">
+            @unless ($edit)
+                <a href="{{ route('organizations.documents.edit', [$organization, $document, 'edit' => true]) }}"
+                   class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
+                    Modifier
+                </a>
+            @else
+                <span class="rounded bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700">Modification en cours</span>
+            @endunless
+            <a href="{{ route('organizations.documents.index', [$organization, 'folder' => $document->folder_id]) }}"
+               class="text-sm text-slate-500 hover:text-slate-900">Retour</a>
+        </div>
+    </div>
+
+    <div
+        wire:ignore
+        x-data="onlyOfficeEditor(@js($editorConfig), @js(config('onlyoffice.document_server_url')))"
+        x-init="init()"
+        class="w-full"
+        style="height: 85vh;"
+    >
+        <div id="onlyoffice-editor-{{ $document->id }}" style="width: 100%; height: 100%;"></div>
+    </div>
+
+    <div class="max-w-5xl">
+        <x-documents.version-history :document="$document" />
+
+        <div class="mt-8">
+            <livewire:related-items.panel :organization="$organization" :item="$document" :key="'related-'.$document->id" />
+        </div>
+    </div>
+</div>
+
+@once
+    <script>
+        function onlyOfficeEditor(config, documentServerUrl) {
+            return {
+                editor: null,
+                init() {
+                    this.loadApi(documentServerUrl).then(() => {
+                        this.editor = new DocsAPI.DocEditor(this.$el.querySelector('div').id, config);
+                    });
+                },
+                loadApi(baseUrl) {
+                    if (window.DocsAPI) {
+                        return Promise.resolve();
+                    }
+
+                    return new Promise((resolve, reject) => {
+                        const script = document.createElement('script');
+                        script.src = baseUrl.replace(/\/$/, '') + '/web-apps/apps/api/documents/api.js';
+                        script.onload = resolve;
+                        script.onerror = reject;
+                        document.head.appendChild(script);
+                    });
+                },
+            };
+        }
+    </script>
+@endonce

resources/views/components/documents/⚡upload-viewer.blade.php

@@ -0,0 +1,82 @@
+<?php
+
+use App\Models\Document;
+use App\Models\Organization;
+use Livewire\Component;
+
+new class extends Component
+{
+    public Organization $organization;
+    public Document $document;
+
+    public bool $renaming = false;
+    public string $name = '';
+
+    public function mount(Organization $organization, Document $document): void
+    {
+        abort_unless($document->isUpload(), 404);
+
+        $this->organization = $organization;
+        $this->document = $document;
+        $this->name = $document->name;
+    }
+
+    public function rename(): void
+    {
+        $validated = $this->validate(['name' => 'required|string|max:255']);
+
+        $this->document->update($validated);
+        $this->renaming = false;
+    }
+};
+?>
+
+<div>
+    <p class="text-sm text-slate-500">{{ $organization->name }}</p>
+    <div class="mb-6 flex items-center justify-between">
+        @if ($renaming)
+            <form wire:submit="rename" class="flex items-center gap-2">
+                <input type="text" wire:model="name" autofocus
+                       class="rounded border-slate-300 text-2xl font-semibold shadow-sm focus:border-slate-500 focus:ring-slate-500">
+                <button type="submit" class="rounded bg-slate-900 px-3 py-1.5 text-sm text-white hover:bg-slate-700">Enregistrer</button>
+                <button type="button" wire:click="$set('renaming', false)" class="text-sm text-slate-500 hover:text-slate-900">Annuler</button>
+                @error('name') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
+            </form>
+        @else
+            <button type="button" wire:click="$set('renaming', true)" class="group flex items-center gap-2">
+                <h1 class="text-2xl font-semibold text-slate-900">📎 {{ $document->name }}</h1>
+                <span class="text-sm text-slate-400 opacity-0 group-hover:opacity-100">Renommer</span>
+            </button>
+        @endif
+        <div class="flex items-center gap-4">
+            <a href="{{ route('organizations.documents.download', [$organization, $document]) }}"
+               class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
+                Télécharger
+            </a>
+            <a href="{{ route('organizations.documents.index', [$organization, 'folder' => $document->folder_id]) }}"
+               class="text-sm text-slate-500 hover:text-slate-900">Retour</a>
+        </div>
+    </div>
+
+    <div class="rounded border border-slate-200 bg-white p-4">
+        <p class="text-sm text-slate-500">
+            Fichier importé le {{ $document->created_at->format('d/m/Y à H:i') }}
+            @if ($document->creator)
+                par {{ $document->creator->name }}
+            @endif
+        </p>
+    </div>
+
+    @if (str_ends_with(strtolower($document->file_path ?? ''), '.pdf'))
+        <div class="mt-4 w-full overflow-hidden rounded border border-slate-200 bg-white">
+            <iframe src="{{ route('organizations.documents.download', [$organization, $document, 'inline' => 1]) }}"
+                    class="h-[80vh] w-full" title="Aperçu du document"></iframe>
+        </div>
+    @endif
+
+    <x-documents.version-history :document="$document" />
+
+    <div class="mt-8">
+        <livewire:related-items.panel :organization="$organization" :item="$document" :key="'related-'.$document->id" />
+    </div>
+</div>