From 7aae3ba299e6cc14e6c89be1a15610d2c3169846 Mon Sep 17 00:00:00 2001
From: Wietse van Ginkel <info@ginkelsoft.com>
Date: Wed, 3 Dec 2025 15:00:44 +0100
Subject: [PATCH 1/8] 2fa new style new checkbox list

---
 resources/lang/en/buildora.php                |   3 +
 .../views/components/datatable.blade.php      |  80 +++-
 .../views/components/relation/panel.blade.php | 375 +++++++++++++++++-
 routes/buildora.php                           |  25 ++
 src/Layouts/Panel.php                         |  51 ++-
 5 files changed, 512 insertions(+), 22 deletions(-)

diff --git a/resources/lang/en/buildora.php b/resources/lang/en/buildora.php
index fd9886b..1a3a277 100644
--- a/resources/lang/en/buildora.php
+++ b/resources/lang/en/buildora.php
@@ -166,4 +166,7 @@
     'Create new item' => 'Create new item',
     'Fill in the details below' => 'Fill in the details below',
     'There are issues with your input' => 'There are issues with your input',
+
+    // Inline relation editing
+    'Are you sure you want to delete this record?' => 'Are you sure you want to delete this record?',
 ];
diff --git a/resources/views/components/datatable.blade.php b/resources/views/components/datatable.blade.php
index 66bb197..8b5f535 100644
--- a/resources/views/components/datatable.blade.php
+++ b/resources/views/components/datatable.blade.php
@@ -1,9 +1,14 @@
 @props([
     'endpoint' => request()->url() . '/datatable/json',
-    'componentKey' => Str::random(8)
+    'componentKey' => Str::random(8),
+    'inlineEditing' => false,
+    'inlineDelete' => false
 ])
 
-<div x-data="dataTable({{ json_encode($endpoint) }})" class="mx-auto" :key="{{ json_encode($componentKey) }}">
+<div x-data="dataTable({{ json_encode($endpoint) }}, {{ json_encode($inlineEditing) }}, {{ json_encode($inlineDelete) }}, {{ json_encode($componentKey) }})"
+     @refresh-datatable-{{ $componentKey }}.window="fetchData()"
+     class="mx-auto"
+     :key="{{ json_encode($componentKey) }}">
 
     {{-- Toast Notification --}}
     <template x-teleport="body">
@@ -224,18 +229,41 @@ class="w-4 h-4 rounded cursor-pointer"
                             </template>
                             <td class="py-3 px-4 text-right">
                                 <div class="flex items-center justify-end gap-1">
-                                    <template x-for="(action, actionIndex) in row.actions" :key="actionIndex">
-                                        <button @click="handleAction(action, row)"
-                                                class="w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200"
-                                                :class="{
-                                                    'hover:bg-black/5 dark:hover:bg-white/5': action.method === 'GET',
-                                                    'hover:bg-red-500/10': action.method === 'DELETE'
-                                                }"
-                                                :style="action.method === 'DELETE' ? 'color: #ef4444;' : 'color: var(--text-muted);'"
-                                                :title="action.label">
-                                            <i :class="action.icon" class="text-sm"></i>
+                                    {{-- Inline Edit Button --}}
+                                    <template x-if="inlineEditing">
+                                        <button @click="openInlineEdit(row)"
+                                                class="w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200 hover:bg-black/5 dark:hover:bg-white/5"
+                                                style="color: var(--text-muted);"
+                                                title="{{ __buildora('Edit') }}">
+                                            <i class="fas fa-edit text-sm"></i>
                                         </button>
                                     </template>
+
+                                    {{-- Inline Delete Button --}}
+                                    <template x-if="inlineDelete">
+                                        <button @click="triggerInlineDelete(row)"
+                                                class="w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200 hover:bg-red-500/10"
+                                                style="color: #ef4444;"
+                                                title="{{ __buildora('Delete') }}">
+                                            <i class="fas fa-trash text-sm"></i>
+                                        </button>
+                                    </template>
+
+                                    {{-- Regular Row Actions (only when not inline editing) --}}
+                                    <template x-if="!inlineEditing">
+                                        <template x-for="(action, actionIndex) in row.actions" :key="actionIndex">
+                                            <button @click="handleAction(action, row)"
+                                                    class="w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200"
+                                                    :class="{
+                                                        'hover:bg-black/5 dark:hover:bg-white/5': action.method === 'GET',
+                                                        'hover:bg-red-500/10': action.method === 'DELETE'
+                                                    }"
+                                                    :style="action.method === 'DELETE' ? 'color: #ef4444;' : 'color: var(--text-muted);'"
+                                                    :title="action.label">
+                                                <i :class="action.icon" class="text-sm"></i>
+                                            </button>
+                                        </template>
+                                    </template>
                                 </div>
                             </td>
                         </tr>
@@ -288,7 +316,7 @@ class="px-4 py-2 text-sm rounded-lg font-medium transition-all duration-200 disa
 </div>
 
 <script>
-    function dataTable(customEndpoint = null) {
+    function dataTable(customEndpoint = null, inlineEditing = false, inlineDelete = false, componentKey = null) {
         function debounce(func, wait, immediate) {
             let timeout;
             return function () {
@@ -311,8 +339,11 @@ function debounce(func, wait, immediate) {
             sortBy: '',
             sortDirection: 'asc',
             pagination: { current_page: 1, per_page: 25, total: 0, last_page: 1 },
-            paginationOptions: [10, 25, 50, 100], // <- ✅ init waarde toegevoegd
+            paginationOptions: [10, 25, 50, 100],
             endpoint: customEndpoint,
+            inlineEditing: inlineEditing,
+            inlineDelete: inlineDelete,
+            componentKey: componentKey,
             debouncedFetchData: null,
             selectedRows: [],
             selectedBulkAction: '',
@@ -337,6 +368,27 @@ function debounce(func, wait, immediate) {
                 this.fetchData();
             },
 
+            // Inline editing: trigger parent panel's openEditModal
+            openInlineEdit(row) {
+                if (this.inlineEditing && row.id) {
+                    // Find parent panel component and call openEditModal
+                    const panel = this.$el.closest('[x-data*="inlineRelationPanel"]');
+                    if (panel && panel.__x) {
+                        panel.__x.$data.openEditModal(row.id);
+                    }
+                }
+            },
+
+            // Inline delete: trigger parent panel's deleteItem
+            triggerInlineDelete(row) {
+                if (this.inlineDelete && row.id) {
+                    const panel = this.$el.closest('[x-data*="inlineRelationPanel"]');
+                    if (panel && panel.__x) {
+                        panel.__x.$data.deleteItem(row.id);
+                    }
+                }
+            },
+
             fetchData() {
                 this.isLoading = true;
                 const params = new URLSearchParams({
diff --git a/resources/views/components/relation/panel.blade.php b/resources/views/components/relation/panel.blade.php
index a247d67..c8c8557 100644
--- a/resources/views/components/relation/panel.blade.php
+++ b/resources/views/components/relation/panel.blade.php
@@ -4,10 +4,377 @@
     $parentResource = $resource->uriKey();
     $parentId = $model->getKey();
     $endpoint = "/buildora/resource/{$parentResource}/{$parentId}/relation/{$relationName}";
-    $componentKey = 'datatable-' . $relationName; // 👈 unieke key
+    $componentKey = 'datatable-' . $relationName;
+    $hasInlineEditing = $relation->hasInlineEditing();
+    $canCreate = $relation->canInlineCreate();
+    $canDelete = $relation->canInlineDelete();
 @endphp
 
-<div class="mt-8" wire:loading.remove>
-    <h3 class="font-semibold text-lg mb-2">{{ $label }}</h3>
-    <x-buildora::datatable :endpoint="$endpoint" :component-key="$componentKey" />
+<div class="mt-8 rounded-2xl overflow-visible"
+     style="background: var(--bg-dropdown); border: 1px solid var(--border-color);"
+     x-data="inlineRelationPanel({
+        endpoint: '{{ $endpoint }}',
+        parentResource: '{{ $parentResource }}',
+        parentId: '{{ $parentId }}',
+        relationName: '{{ $relationName }}',
+        hasInlineEditing: {{ $hasInlineEditing ? 'true' : 'false' }},
+        canCreate: {{ $canCreate ? 'true' : 'false' }},
+        canDelete: {{ $canDelete ? 'true' : 'false' }}
+     })">
+
+    {{-- Panel Header --}}
+    <div class="flex items-center justify-between p-4 lg:p-6" style="border-bottom: 1px solid var(--border-color);">
+        <h3 class="text-lg font-semibold" style="color: var(--text-primary);">
+            {{ $label }}
+        </h3>
+
+        @if($hasInlineEditing && $canCreate)
+            <button type="button"
+                    @click="openCreateModal()"
+                    class="inline-flex items-center gap-2 px-4 py-2 btn-primary text-white text-sm font-medium rounded-xl shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200">
+                <i class="fa-solid fa-plus"></i>
+                {{ __buildora('Add') }}
+            </button>
+        @endif
+    </div>
+
+    {{-- Datatable --}}
+    <div class="p-4 lg:p-6">
+        <x-buildora::datatable
+            :endpoint="$endpoint"
+            :component-key="$componentKey"
+            :inline-editing="$hasInlineEditing"
+            :inline-delete="$canDelete"
+        />
+    </div>
+
+    {{-- Inline Edit Modal --}}
+    @if($hasInlineEditing)
+        <div x-show="showModal"
+             x-cloak
+             class="fixed inset-0 z-50 overflow-y-auto"
+             @keydown.escape.window="closeModal()">
+
+            {{-- Backdrop --}}
+            <div class="fixed inset-0 transition-opacity"
+                 style="background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px);"
+                 @click="closeModal()"></div>
+
+            {{-- Modal Content --}}
+            <div class="flex items-center justify-center min-h-screen p-4">
+                <div class="relative w-full max-w-2xl rounded-2xl shadow-2xl"
+                     style="background: var(--bg-dropdown); border: 1px solid var(--border-color);"
+                     x-transition:enter="transition ease-out duration-200"
+                     x-transition:enter-start="opacity-0 scale-95"
+                     x-transition:enter-end="opacity-100 scale-100"
+                     x-transition:leave="transition ease-in duration-150"
+                     x-transition:leave-start="opacity-100 scale-100"
+                     x-transition:leave-end="opacity-0 scale-95"
+                     @click.stop>
+
+                    {{-- Modal Header --}}
+                    <div class="flex items-center justify-between p-6" style="border-bottom: 1px solid var(--border-color);">
+                        <h3 class="text-xl font-semibold" style="color: var(--text-primary);">
+                            <span x-text="editingId ? '{{ __buildora('Edit') }}' : '{{ __buildora('Add') }}'"></span>
+                            {{ $label }}
+                        </h3>
+                        <button @click="closeModal()"
+                                class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors hover:bg-black/5 dark:hover:bg-white/5"
+                                style="color: var(--text-muted);">
+                            <i class="fa-solid fa-times"></i>
+                        </button>
+                    </div>
+
+                    {{-- Modal Body --}}
+                    <div class="p-6">
+                        {{-- Loading State --}}
+                        <div x-show="isLoadingFields" class="flex items-center justify-center py-8">
+                            <i class="fa-solid fa-spinner fa-spin text-2xl" style="color: var(--text-muted);"></i>
+                        </div>
+
+                        {{-- Error State --}}
+                        <div x-show="formError && !isLoadingFields" class="mb-4 p-4 rounded-xl"
+                             style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);">
+                            <div class="flex items-center gap-3">
+                                <i class="fa-solid fa-exclamation-circle text-red-500"></i>
+                                <span class="text-red-500 text-sm" x-text="formError"></span>
+                            </div>
+                        </div>
+
+                        {{-- Dynamic Form Fields --}}
+                        <form x-show="!isLoadingFields" @submit.prevent="submitForm()" class="space-y-4">
+                            <template x-for="field in formFields" :key="field.name">
+                                <div>
+                                    <label :for="field.name"
+                                           class="block text-sm font-medium mb-2"
+                                           style="color: var(--text-secondary);"
+                                           x-text="field.label">
+                                    </label>
+
+                                    {{-- Text Input --}}
+                                    <template x-if="['text', 'email', 'number', 'date', 'datetime'].includes(field.type)">
+                                        <input :type="field.type === 'datetime' ? 'datetime-local' : field.type"
+                                               :name="field.name"
+                                               :id="field.name"
+                                               :placeholder="field.placeholder"
+                                               :readonly="field.readonly"
+                                               x-model="formData[field.name]"
+                                               class="w-full h-12 px-4 rounded-xl text-sm transition-all focus:outline-none"
+                                               style="background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary);"
+                                               onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 3px rgba(102,126,234,0.1)'"
+                                               onblur="this.style.borderColor='var(--border-color)'; this.style.boxShadow='none'" />
+                                    </template>
+
+                                    {{-- Password Input --}}
+                                    <template x-if="field.type === 'password'">
+                                        <input type="password"
+                                               :name="field.name"
+                                               :id="field.name"
+                                               :placeholder="field.placeholder || '••••••••'"
+                                               x-model="formData[field.name]"
+                                               class="w-full h-12 px-4 rounded-xl text-sm transition-all focus:outline-none"
+                                               style="background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary);"
+                                               onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 3px rgba(102,126,234,0.1)'"
+                                               onblur="this.style.borderColor='var(--border-color)'; this.style.boxShadow='none'" />
+                                    </template>
+
+                                    {{-- Select Input --}}
+                                    <template x-if="field.type === 'select'">
+                                        <select :name="field.name"
+                                                :id="field.name"
+                                                x-model="formData[field.name]"
+                                                class="w-full h-12 px-4 rounded-xl text-sm transition-all focus:outline-none"
+                                                style="background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary);">
+                                            <option value="">{{ __buildora('Select a value...') }}</option>
+                                            <template x-for="[key, label] in Object.entries(field.options || {})" :key="key">
+                                                <option :value="key" x-text="label"></option>
+                                            </template>
+                                        </select>
+                                    </template>
+
+                                    {{-- Boolean/Checkbox Input --}}
+                                    <template x-if="field.type === 'boolean'">
+                                        <label class="relative inline-flex items-center cursor-pointer">
+                                            <input type="checkbox"
+                                                   :name="field.name"
+                                                   x-model="formData[field.name]"
+                                                   class="sr-only peer">
+                                            <div class="w-11 h-6 rounded-full peer transition-colors duration-200"
+                                                 style="background: var(--border-color);"
+                                                 :style="formData[field.name] ? 'background: #667eea' : ''">
+                                                <div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform duration-200"
+                                                     :class="formData[field.name] ? 'translate-x-5' : ''"></div>
+                                            </div>
+                                        </label>
+                                    </template>
+
+                                    {{-- Textarea --}}
+                                    <template x-if="field.type === 'textarea'">
+                                        <textarea :name="field.name"
+                                                  :id="field.name"
+                                                  :placeholder="field.placeholder"
+                                                  x-model="formData[field.name]"
+                                                  rows="4"
+                                                  class="w-full px-4 py-3 rounded-xl text-sm transition-all focus:outline-none resize-none"
+                                                  style="background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary);"
+                                                  onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 3px rgba(102,126,234,0.1)'"
+                                                  onblur="this.style.borderColor='var(--border-color)'; this.style.boxShadow='none'">
+                                        </textarea>
+                                    </template>
+
+                                    {{-- Help Text --}}
+                                    <template x-if="field.help">
+                                        <p class="mt-1 text-xs" style="color: var(--text-muted);" x-text="field.help"></p>
+                                    </template>
+
+                                    {{-- Field Error --}}
+                                    <template x-if="fieldErrors[field.name]">
+                                        <p class="mt-1 text-xs text-red-500" x-text="fieldErrors[field.name]"></p>
+                                    </template>
+                                </div>
+                            </template>
+                        </form>
+                    </div>
+
+                    {{-- Modal Footer --}}
+                    <div class="flex items-center justify-end gap-3 p-6" style="border-top: 1px solid var(--border-color);">
+                        <button type="button"
+                                @click="closeModal()"
+                                class="px-5 py-2.5 rounded-xl font-medium transition-all duration-200 hover:bg-black/5 dark:hover:bg-white/5"
+                                style="background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary);">
+                            {{ __buildora('cancel') }}
+                        </button>
+                        <button type="button"
+                                @click="submitForm()"
+                                :disabled="isSubmitting"
+                                class="inline-flex items-center gap-2 px-5 py-2.5 btn-primary text-white font-medium rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
+                            <i x-show="isSubmitting" class="fa-solid fa-spinner fa-spin"></i>
+                            <i x-show="!isSubmitting" class="fa-solid fa-check"></i>
+                            {{ __buildora('Save') }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    @endif
 </div>
+
+@if($hasInlineEditing)
+@once
+<script>
+function inlineRelationPanel(config) {
+    return {
+        endpoint: config.endpoint,
+        parentResource: config.parentResource,
+        parentId: config.parentId,
+        relationName: config.relationName,
+        hasInlineEditing: config.hasInlineEditing,
+        canCreate: config.canCreate,
+        canDelete: config.canDelete,
+
+        showModal: false,
+        editingId: null,
+        formFields: [],
+        formData: {},
+        fieldErrors: {},
+        formError: null,
+        isLoadingFields: false,
+        isSubmitting: false,
+
+        openCreateModal() {
+            this.editingId = null;
+            this.formData = {};
+            this.fieldErrors = {};
+            this.formError = null;
+            this.showModal = true;
+            this.loadFields();
+        },
+
+        openEditModal(itemId) {
+            this.editingId = itemId;
+            this.formData = {};
+            this.fieldErrors = {};
+            this.formError = null;
+            this.showModal = true;
+            this.loadFields(itemId);
+        },
+
+        closeModal() {
+            this.showModal = false;
+            this.editingId = null;
+            this.formFields = [];
+            this.formData = {};
+            this.fieldErrors = {};
+            this.formError = null;
+        },
+
+        async loadFields(itemId = null) {
+            this.isLoadingFields = true;
+
+            const url = itemId
+                ? `${this.endpoint}/fields/${itemId}`
+                : `${this.endpoint}/fields`;
+
+            try {
+                const response = await fetch(url, {
+                    headers: {
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                    }
+                });
+
+                if (!response.ok) throw new Error('Failed to load fields');
+
+                const data = await response.json();
+                this.formFields = data.fields;
+
+                // Initialize form data with values
+                this.formData = {};
+                data.fields.forEach(field => {
+                    this.formData[field.name] = field.value ?? '';
+                });
+
+            } catch (error) {
+                this.formError = error.message;
+            } finally {
+                this.isLoadingFields = false;
+            }
+        },
+
+        async submitForm() {
+            this.isSubmitting = true;
+            this.fieldErrors = {};
+            this.formError = null;
+
+            const url = this.editingId
+                ? `${this.endpoint}/${this.editingId}`
+                : this.endpoint;
+
+            const method = this.editingId ? 'PUT' : 'POST';
+
+            try {
+                const response = await fetch(url, {
+                    method: method,
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                    },
+                    body: JSON.stringify(this.formData)
+                });
+
+                const data = await response.json();
+
+                if (!response.ok) {
+                    if (response.status === 422 && data.errors) {
+                        // Validation errors
+                        Object.keys(data.errors).forEach(key => {
+                            this.fieldErrors[key] = data.errors[key][0];
+                        });
+                    } else {
+                        this.formError = data.message || 'An error occurred';
+                    }
+                    return;
+                }
+
+                // Success - close modal and refresh datatable
+                this.closeModal();
+
+                // Dispatch event to refresh the datatable
+                window.dispatchEvent(new CustomEvent('refresh-datatable-{{ $componentKey }}'));
+
+            } catch (error) {
+                this.formError = error.message;
+            } finally {
+                this.isSubmitting = false;
+            }
+        },
+
+        async deleteItem(itemId) {
+            if (!confirm('{{ __buildora("Are you sure you want to delete this record?") }}')) {
+                return;
+            }
+
+            try {
+                const response = await fetch(`${this.endpoint}/${itemId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                    }
+                });
+
+                if (!response.ok) throw new Error('Failed to delete');
+
+                // Refresh datatable
+                window.dispatchEvent(new CustomEvent('refresh-datatable-{{ $componentKey }}'));
+
+            } catch (error) {
+                alert(error.message);
+            }
+        }
+    };
+}
+</script>
+@endonce
+@endif
diff --git a/routes/buildora.php b/routes/buildora.php
index be88324..1e63d28 100644
--- a/routes/buildora.php
+++ b/routes/buildora.php
@@ -8,6 +8,7 @@
 use Ginkelsoft\Buildora\Http\Controllers\BuildoraController;
 use Ginkelsoft\Buildora\Http\Controllers\GlobalSearchController;
 use Ginkelsoft\Buildora\Http\Controllers\RelationDatatableController;
+use Ginkelsoft\Buildora\Http\Controllers\InlineRelationController;
 use Ginkelsoft\Buildora\Http\Controllers\PermissionSyncController;
 use Ginkelsoft\Buildora\Http\Controllers\ProfileController;
 use Ginkelsoft\Buildora\Http\Controllers\TwoFactorController;
@@ -124,6 +125,30 @@
                 ->middleware('buildora.can:view')
                 ->name('buildora.relation.index');
 
+            // Inline Relation CRUD Routes
+            Route::get('{resource}/{id}/relation/{relation}/fields/{itemId?}', [InlineRelationController::class, 'fields'])
+                ->where('id', '[0-9]+')
+                ->where('itemId', '[0-9]+')
+                ->middleware('buildora.can:view')
+                ->name('buildora.relation.fields');
+
+            Route::post('{resource}/{id}/relation/{relation}', [InlineRelationController::class, 'store'])
+                ->where('id', '[0-9]+')
+                ->middleware('buildora.can:create')
+                ->name('buildora.relation.store');
+
+            Route::put('{resource}/{id}/relation/{relation}/{itemId}', [InlineRelationController::class, 'update'])
+                ->where('id', '[0-9]+')
+                ->where('itemId', '[0-9]+')
+                ->middleware('buildora.can:edit')
+                ->name('buildora.relation.update');
+
+            Route::delete('{resource}/{id}/relation/{relation}/{itemId}', [InlineRelationController::class, 'destroy'])
+                ->where('id', '[0-9]+')
+                ->where('itemId', '[0-9]+')
+                ->middleware('buildora.can:delete')
+                ->name('buildora.relation.destroy');
+
             Route::put('{resource}/{id}', [BuildoraController::class, 'update'])
                 ->where('id', '[0-9]+')
                 ->middleware('buildora.can:edit')
diff --git a/src/Layouts/Panel.php b/src/Layouts/Panel.php
index c793aa9..0fc6afc 100644
--- a/src/Layouts/Panel.php
+++ b/src/Layouts/Panel.php
@@ -7,6 +7,10 @@
 
 class Panel
 {
+    protected bool $inlineEditing = false;
+    protected bool $inlineCreate = false;
+    protected bool $inlineDelete = false;
+
     public function __construct(
         public string $relationName,
         public string $resourceClass,
@@ -14,6 +18,42 @@ public function __construct(
     ) {
     }
 
+    /**
+     * Enable inline editing for this relation panel.
+     * Allows editing related records in a modal without leaving the page.
+     */
+    public function inlineEditing(bool $create = true, bool $delete = true): static
+    {
+        $this->inlineEditing = true;
+        $this->inlineCreate = $create;
+        $this->inlineDelete = $delete;
+        return $this;
+    }
+
+    /**
+     * Check if inline editing is enabled.
+     */
+    public function hasInlineEditing(): bool
+    {
+        return $this->inlineEditing;
+    }
+
+    /**
+     * Check if inline create is enabled.
+     */
+    public function canInlineCreate(): bool
+    {
+        return $this->inlineEditing && $this->inlineCreate;
+    }
+
+    /**
+     * Check if inline delete is enabled.
+     */
+    public function canInlineDelete(): bool
+    {
+        return $this->inlineEditing && $this->inlineDelete;
+    }
+
     /**
      * Koppel een relationele resource op basis van een relatienaam (zoals 'orders')
      */
@@ -68,10 +108,13 @@ public static function relation(string $method, string $resourceClass): static
     public function toArray(): array
     {
         return [
-            'type'     => 'panel',
-            'relation' => $this->relationName,
-            'resource' => $this->resourceClass,
-            'label'    => $this->label ?? ucfirst($this->relationName),
+            'type'           => 'panel',
+            'relation'       => $this->relationName,
+            'resource'       => $this->resourceClass,
+            'label'          => $this->label ?? ucfirst($this->relationName),
+            'inlineEditing'  => $this->inlineEditing,
+            'inlineCreate'   => $this->inlineCreate,
+            'inlineDelete'   => $this->inlineDelete,
         ];
     }
 }

From 3e87a8d9c61a3e620d8d7ce543ac16f47d377f58 Mon Sep 17 00:00:00 2001
From: Wietse van Ginkel <info@ginkelsoft.com>
Date: Wed, 3 Dec 2025 15:09:38 +0100
Subject: [PATCH 2/8] 2fa new style new checkbox list

---
 resources/lang/nl/buildora.php                |   3 +
 .../views/components/relation/panel.blade.php |  17 +-
 .../Controllers/InlineRelationController.php  | 256 ++++++++++++++++++
 3 files changed, 272 insertions(+), 4 deletions(-)
 create mode 100644 src/Http/Controllers/InlineRelationController.php

diff --git a/resources/lang/nl/buildora.php b/resources/lang/nl/buildora.php
index 56b905c..67d5aeb 100644
--- a/resources/lang/nl/buildora.php
+++ b/resources/lang/nl/buildora.php
@@ -167,4 +167,7 @@
     'Create new item' => 'Nieuw item aanmaken',
     'Fill in the details below' => 'Vul de onderstaande gegevens in',
     'There are issues with your input' => 'Er zijn problemen met je invoer',
+
+    // Inline relation editing
+    'Are you sure you want to delete this record?' => 'Weet je zeker dat je dit record wilt verwijderen?',
 ];
diff --git a/resources/views/components/relation/panel.blade.php b/resources/views/components/relation/panel.blade.php
index c8c8557..02aa6c1 100644
--- a/resources/views/components/relation/panel.blade.php
+++ b/resources/views/components/relation/panel.blade.php
@@ -270,6 +270,7 @@ function inlineRelationPanel(config) {
 
         async loadFields(itemId = null) {
             this.isLoadingFields = true;
+            this.formError = null;
 
             const url = itemId
                 ? `${this.endpoint}/fields/${itemId}`
@@ -283,18 +284,26 @@ function inlineRelationPanel(config) {
                     }
                 });
 
-                if (!response.ok) throw new Error('Failed to load fields');
-
                 const data = await response.json();
-                this.formFields = data.fields;
+
+                if (!response.ok) {
+                    throw new Error(data.error || data.message || 'Failed to load fields');
+                }
+
+                if (data.error) {
+                    throw new Error(data.error);
+                }
+
+                this.formFields = data.fields || [];
 
                 // Initialize form data with values
                 this.formData = {};
-                data.fields.forEach(field => {
+                (data.fields || []).forEach(field => {
                     this.formData[field.name] = field.value ?? '';
                 });
 
             } catch (error) {
+                console.error('Load fields error:', error);
                 this.formError = error.message;
             } finally {
                 this.isLoadingFields = false;
diff --git a/src/Http/Controllers/InlineRelationController.php b/src/Http/Controllers/InlineRelationController.php
new file mode 100644
index 0000000..0fb0f07
--- /dev/null
+++ b/src/Http/Controllers/InlineRelationController.php
@@ -0,0 +1,256 @@
+<?php
+
+namespace Ginkelsoft\Buildora\Http\Controllers;
+
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+use Ginkelsoft\Buildora\Support\ResourceResolver;
+
+/**
+ * Controller for inline editing of HasMany and BelongsToMany relations.
+ * Handles CRUD operations via AJAX for relation panels with inlineEditing enabled.
+ */
+class InlineRelationController extends Controller
+{
+    /**
+     * Get the form fields for creating/editing a relation item.
+     */
+    public function fields(string $resource, int|string $id, string $relation, ?int $itemId = null): JsonResponse
+    {
+        try {
+            $parentResource = ResourceResolver::resolve($resource);
+            $parentModel = $parentResource->getModelInstance()->findOrFail($id);
+
+            $relationConfig = $this->getRelationConfig($parentResource, $relation);
+            $relatedResource = app($relationConfig->resourceClass);
+
+            // Get the related model instance (for edit) or a new instance (for create)
+            $relationQuery = $parentModel->{$relation}();
+            $relatedModel = $itemId
+                ? $relationQuery->findOrFail($itemId)
+                : $relationQuery->getRelated()->newInstance();
+
+            // Fill the resource with the model
+            $relatedResource->fill($relatedModel);
+
+            // Get fields for the form
+            $fields = $relatedResource->resolveFields($relatedModel);
+            $visibility = $itemId ? 'edit' : 'create';
+
+            $formFields = collect($fields)
+                ->filter(fn($field) => $field->isVisible($visibility))
+                ->map(function($field) use ($relatedModel) {
+                    $data = [
+                        'name' => $field->name,
+                        'label' => $field->label,
+                        'type' => $field->type,
+                        'value' => $relatedModel->{$field->name} ?? '',
+                        'placeholder' => $field->placeholder ?? '',
+                        'help' => $field->help ?? null,
+                        'readonly' => $field->readonly ?? false,
+                        'columnSpan' => $field->getColumnSpan(),
+                    ];
+
+                    // Safely get options
+                    if (method_exists($field, 'getOptions')) {
+                        try {
+                            $data['options'] = $field->getOptions();
+                        } catch (\Exception $e) {
+                            $data['options'] = [];
+                        }
+                    } else {
+                        $data['options'] = [];
+                    }
+
+                    // Safely get validation rules
+                    try {
+                        $data['rules'] = $field->getValidationRules() ?? [];
+                    } catch (\Exception $e) {
+                        $data['rules'] = [];
+                    }
+
+                    return $data;
+                })
+                ->values()
+                ->toArray();
+
+            return response()->json([
+                'fields' => $formFields,
+                'item' => $itemId ? $relatedModel->toArray() : null,
+            ]);
+        } catch (\Exception $e) {
+            return response()->json([
+                'error' => $e->getMessage(),
+                'trace' => config('app.debug') ? $e->getTraceAsString() : null,
+            ], 500);
+        }
+    }
+
+    /**
+     * Store a new relation item.
+     */
+    public function store(Request $request, string $resource, int|string $id, string $relation): JsonResponse
+    {
+        $parentResource = ResourceResolver::resolve($resource);
+        $parentModel = $parentResource->getModelInstance()->findOrFail($id);
+
+        $relationConfig = $this->getRelationConfig($parentResource, $relation);
+        $relatedResource = app($relationConfig->resourceClass);
+
+        $relationQuery = $parentModel->{$relation}();
+
+        // Get validation rules from the resource fields
+        $fields = $relatedResource->resolveFields($relatedResource->getModelInstance());
+        $rules = $this->getValidationRules($fields, 'create');
+
+        $validated = $request->validate($rules);
+
+        // Filter out empty password fields
+        $data = collect($validated)->filter(function ($value, $key) use ($fields) {
+            $field = collect($fields)->firstWhere('name', $key);
+            if ($field && $field->type === 'password' && empty($value)) {
+                return false;
+            }
+            return true;
+        })->toArray();
+
+        // Handle password hashing
+        foreach ($fields as $field) {
+            if ($field->type === 'password' && !empty($data[$field->name])) {
+                $data[$field->name] = bcrypt($data[$field->name]);
+            }
+        }
+
+        // Create the related model
+        if ($relationQuery instanceof HasMany) {
+            $item = $relationQuery->create($data);
+        } elseif ($relationQuery instanceof BelongsToMany) {
+            $relatedModel = $relationQuery->getRelated();
+            $item = $relatedModel->create($data);
+            $relationQuery->attach($item->id);
+        } else {
+            return response()->json(['error' => 'Unsupported relation type'], 400);
+        }
+
+        return response()->json([
+            'success' => true,
+            'message' => __buildora('created successfully.'),
+            'item' => $item->toArray(),
+        ]);
+    }
+
+    /**
+     * Update an existing relation item.
+     */
+    public function update(Request $request, string $resource, int|string $id, string $relation, int $itemId): JsonResponse
+    {
+        $parentResource = ResourceResolver::resolve($resource);
+        $parentModel = $parentResource->getModelInstance()->findOrFail($id);
+
+        $relationConfig = $this->getRelationConfig($parentResource, $relation);
+        $relatedResource = app($relationConfig->resourceClass);
+
+        $relationQuery = $parentModel->{$relation}();
+        $item = $relationQuery->findOrFail($itemId);
+
+        // Get validation rules from the resource fields
+        $fields = $relatedResource->resolveFields($item);
+        $rules = $this->getValidationRules($fields, 'edit');
+
+        $validated = $request->validate($rules);
+
+        // Filter out empty password fields
+        $data = collect($validated)->filter(function ($value, $key) use ($fields) {
+            $field = collect($fields)->firstWhere('name', $key);
+            if ($field && $field->type === 'password' && empty($value)) {
+                return false;
+            }
+            return true;
+        })->toArray();
+
+        // Handle password hashing
+        foreach ($fields as $field) {
+            if ($field->type === 'password' && !empty($data[$field->name])) {
+                $data[$field->name] = bcrypt($data[$field->name]);
+            }
+        }
+
+        $item->update($data);
+
+        return response()->json([
+            'success' => true,
+            'message' => __buildora('updated successfully.'),
+            'item' => $item->fresh()->toArray(),
+        ]);
+    }
+
+    /**
+     * Delete a relation item.
+     */
+    public function destroy(string $resource, int|string $id, string $relation, int $itemId): JsonResponse
+    {
+        $parentResource = ResourceResolver::resolve($resource);
+        $parentModel = $parentResource->getModelInstance()->findOrFail($id);
+
+        $relationConfig = $this->getRelationConfig($parentResource, $relation);
+
+        $relationQuery = $parentModel->{$relation}();
+
+        if ($relationQuery instanceof BelongsToMany) {
+            // For BelongsToMany, detach instead of delete
+            $relationQuery->detach($itemId);
+        } else {
+            // For HasMany, delete the record
+            $item = $relationQuery->findOrFail($itemId);
+            $item->delete();
+        }
+
+        return response()->json([
+            'success' => true,
+            'message' => __buildora('deleted successfully.'),
+        ]);
+    }
+
+    /**
+     * Get the relation configuration from the parent resource.
+     */
+    protected function getRelationConfig($parentResource, string $relation)
+    {
+        $relationConfig = collect($parentResource->getRelationResources())
+            ->first(fn($layout) => $layout->relationName === $relation);
+
+        if (!$relationConfig) {
+            abort(404, "Relation '{$relation}' not found on resource");
+        }
+
+        if (!$relationConfig->hasInlineEditing()) {
+            abort(403, "Inline editing is not enabled for relation '{$relation}'");
+        }
+
+        return $relationConfig;
+    }
+
+    /**
+     * Get validation rules from fields.
+     */
+    protected function getValidationRules(array $fields, string $visibility): array
+    {
+        $rules = [];
+
+        foreach ($fields as $field) {
+            if (!$field->isVisible($visibility)) {
+                continue;
+            }
+
+            $fieldRules = $field->getValidationRules();
+            if (!empty($fieldRules)) {
+                $rules[$field->name] = $fieldRules;
+            }
+        }
+
+        return $rules;
+    }
+}

From 61b9b695bdc2fd9e4fa9dfeade9b269aaa3f1791 Mon Sep 17 00:00:00 2001
From: Wietse van Ginkel <info@ginkelsoft.com>
Date: Thu, 4 Dec 2025 13:15:53 +0100
Subject: [PATCH 3/8] inline relation modal buildora settings page docs

---
 composer.json                                 |   5 +-
 config/buildora.php                           |   6 +
 config/larecipe.php                           |  98 +++++
 package.json                                  |   2 +-
 resources/docs/1.0/actions.md                 | 271 +++++++++++++
 resources/docs/1.0/commands.md                | 148 +++++++
 resources/docs/1.0/configuration.md           | 251 ++++++++++++
 resources/docs/1.0/fields.md                  | 360 ++++++++++++++++++
 resources/docs/1.0/index.json                 |  24 ++
 resources/docs/1.0/index.md                   |  35 ++
 resources/docs/1.0/installation.md            |  44 +++
 resources/docs/1.0/panels.md                  | 183 +++++++++
 resources/docs/1.0/permissions.md             | 152 ++++++++
 resources/docs/1.0/resources.md               | 302 +++++++++++++++
 resources/docs/1.0/theming.md                 | 154 ++++++++
 resources/docs/1.0/validation.md              | 155 ++++++++
 resources/docs/1.0/widgets.md                 | 244 ++++++++++++
 resources/lang/en/buildora.php                |  32 ++
 resources/lang/nl/buildora.php                |  32 ++
 resources/views/settings/index.blade.php      | 334 ++++++++++++++++
 routes/buildora.php                           |  20 +-
 .../BuildoraSettingsController.php            | 131 +++++++
 src/Providers/BuildoraServiceProvider.php     |  10 +
 23 files changed, 2989 insertions(+), 4 deletions(-)
 create mode 100644 config/larecipe.php
 create mode 100644 resources/docs/1.0/actions.md
 create mode 100644 resources/docs/1.0/commands.md
 create mode 100644 resources/docs/1.0/configuration.md
 create mode 100644 resources/docs/1.0/fields.md
 create mode 100644 resources/docs/1.0/index.json
 create mode 100644 resources/docs/1.0/index.md
 create mode 100644 resources/docs/1.0/installation.md
 create mode 100644 resources/docs/1.0/panels.md
 create mode 100644 resources/docs/1.0/permissions.md
 create mode 100644 resources/docs/1.0/resources.md
 create mode 100644 resources/docs/1.0/theming.md
 create mode 100644 resources/docs/1.0/validation.md
 create mode 100644 resources/docs/1.0/widgets.md
 create mode 100644 resources/views/settings/index.blade.php
 create mode 100644 src/Http/Controllers/BuildoraSettingsController.php

diff --git a/composer.json b/composer.json
index 164c2fe..fe7f5fa 100644
--- a/composer.json
+++ b/composer.json
@@ -21,10 +21,11 @@
         "livewire/livewire": "^3.0",
         "maatwebsite/excel": "^3.1",
         "pragmarx/google2fa": "^8.0",
-        "spatie/laravel-permission": "^6.16"
+        "spatie/laravel-permission": "^6.16",
+        "binarytorch/larecipe": "^2.0"
     },
     "extra": {
-        "buildora-version": "1.0.36",
+        "buildora-version": "1.0.37",
         "laravel": {
             "providers": [
                 "Ginkelsoft\\Buildora\\Providers\\BuildoraServiceProvider"
diff --git a/config/buildora.php b/config/buildora.php
index 74f3c9b..956d711 100644
--- a/config/buildora.php
+++ b/config/buildora.php
@@ -105,6 +105,12 @@
             'label' => 'Settings',
             'icon' => 'fas fa-cog',
             'children' => [
+                [
+                    'label' => 'Buildora',
+                    'icon' => 'fas fa-sliders-h',
+                    'route' => 'buildora.settings',
+                    'params' => []
+                ],
                 [
                     'label' => 'Users',
                     'icon' => 'fas fa-user',
diff --git a/config/larecipe.php b/config/larecipe.php
new file mode 100644
index 0000000..30f42ba
--- /dev/null
+++ b/config/larecipe.php
@@ -0,0 +1,98 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Documentation Routes
+    |--------------------------------------------------------------------------
+    |
+    | These options configure the documentation routes.
+    |
+    */
+
+    'docs' => [
+        'route' => '/docs',
+        'path' => '/resources/docs',
+        'landing' => 'index',
+        'middleware' => ['web'],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Documentation Versions
+    |--------------------------------------------------------------------------
+    |
+    | Here you can define the available documentation versions.
+    |
+    */
+
+    'versions' => [
+        'default' => '1.0',
+        'published' => [
+            '1.0',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Documentation Settings
+    |--------------------------------------------------------------------------
+    |
+    | Configure documentation behavior.
+    |
+    */
+
+    'settings' => [
+        'auth' => false,
+        'ga_id' => '',
+        'middleware' => [],
+        'edit_on_github' => [
+            'enabled' => true,
+            'repo' => 'https://github.com/ginkelsoft/buildora',
+            'branch' => 'main',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Appearance
+    |--------------------------------------------------------------------------
+    |
+    | Configure the appearance of the documentation.
+    |
+    */
+
+    'ui' => [
+        'code_theme' => 'dark',
+        'fav' => '',
+        'fa_v4_shims' => true,
+        'show_side_bar' => true,
+        'colors' => [
+            'primary' => '#667eea',
+            'secondary' => '#e8f4f8',
+        ],
+        'theme_order' => null,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | SEO
+    |--------------------------------------------------------------------------
+    |
+    | Configure SEO settings.
+    |
+    */
+
+    'seo' => [
+        'author' => 'Ginkelsoft',
+        'description' => 'Buildora - Laravel Admin Panel Package Documentation',
+        'keywords' => 'laravel, admin panel, crud, buildora, datatables',
+        'og' => [
+            'title' => 'Buildora Documentation',
+            'type' => 'website',
+            'url' => '',
+            'image' => '',
+            'description' => 'Buildora - Laravel Admin Panel Package Documentation',
+        ],
+    ],
+];
diff --git a/package.json b/package.json
index 5228a3f..c1c5add 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "buildora",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "description": "Buildora resource engine",
   "main": "index.js",
   "scripts": {
diff --git a/resources/docs/1.0/actions.md b/resources/docs/1.0/actions.md
new file mode 100644
index 0000000..2f64b39
--- /dev/null
+++ b/resources/docs/1.0/actions.md
@@ -0,0 +1,271 @@
+# Actions
+
+---
+
+- [Introduction](#introduction)
+- [Row Actions](#row-actions)
+- [Bulk Actions](#bulk-actions)
+- [Page Actions](#page-actions)
+- [Full Example](#example)
+
+<a name="introduction"></a>
+## Introduction
+
+Actions allow users to perform operations on records. Buildora supports three types: Row Actions, Bulk Actions, and Page Actions.
+
+<a name="row-actions"></a>
+## Row Actions
+
+Row actions appear in the actions column of the datatable and operate on individual records.
+
+### Creating Row Actions
+
+```php
+use Ginkelsoft\Buildora\Actions\RowAction;
+
+public function defineRowActions(): array
+{
+    return [
+        RowAction::make('View Details', 'fas fa-eye', 'route', 'products.show')
+            ->params(['id' => 'id']),
+
+        RowAction::make('Edit', 'fas fa-edit', 'route', 'buildora.edit')
+            ->params(['resource' => 'products', 'id' => 'id']),
+
+        RowAction::make('Delete', 'fas fa-trash', 'route', 'buildora.destroy')
+            ->method('DELETE')
+            ->confirm('Are you sure you want to delete this product?'),
+    ];
+}
+```
+
+### RowAction Methods
+
+#### make()
+
+Factory method to create a new action:
+
+```php
+RowAction::make(
+    string $label,      // Button label
+    string $icon,       // FontAwesome icon class
+    string $type,       // 'route' or 'url'
+    string $action      // Route name or URL
+): RowAction
+```
+
+#### method()
+
+Set the HTTP method:
+
+```php
+->method('GET')     // Default
+->method('POST')
+->method('PUT')
+->method('DELETE')
+```
+
+#### params()
+
+Define route parameters. Use the field name as the value to substitute:
+
+```php
+->params(['id' => 'id'])  // Substitutes record's 'id' field
+->params([
+    'resource' => 'products',  // Static value
+    'id' => 'id',              // Dynamic from record
+])
+```
+
+#### confirm()
+
+Show a confirmation dialog before executing:
+
+```php
+->confirm('Are you sure you want to delete this item?')
+```
+
+#### permission()
+
+Require a permission to see/use this action:
+
+```php
+->permission('product.delete')
+```
+
+<a name="bulk-actions"></a>
+## Bulk Actions
+
+Bulk actions operate on multiple selected records from the datatable.
+
+### Creating Bulk Actions
+
+```php
+use Ginkelsoft\Buildora\Actions\BulkAction;
+
+public function defineBulkActions(): array
+{
+    return [
+        BulkAction::make('Delete Selected', 'products.bulk-delete')
+            ->method('DELETE')
+            ->permission('product.delete'),
+
+        BulkAction::make('Export Selected', 'products.bulk-export')
+            ->method('POST')
+            ->permission('product.export'),
+    ];
+}
+```
+
+### BulkAction Methods
+
+#### make()
+
+```php
+BulkAction::make(
+    string $label,           // Button label
+    string $route,           // Route name
+    array $parameters = []   // Additional route parameters
+): BulkAction
+```
+
+#### method()
+
+```php
+->method('POST')    // Default
+->method('DELETE')
+```
+
+#### permission()
+
+```php
+->permission('product.bulk-delete')
+```
+
+### Handling Bulk Actions
+
+In your controller, receive the selected IDs:
+
+```php
+// routes/web.php
+Route::post('products/bulk-publish', [ProductController::class, 'bulkPublish'])
+    ->name('products.bulk-publish');
+
+// ProductController.php
+public function bulkPublish(Request $request)
+{
+    $ids = $request->input('ids', []);
+    Product::whereIn('id', $ids)->update(['status' => 'published']);
+    return back()->with('success', count($ids) . ' products published.');
+}
+```
+
+> {info} Buildora automatically includes export actions (XLSX, CSV) for bulk operations.
+
+<a name="page-actions"></a>
+## Page Actions
+
+Page actions appear in the header of the index page.
+
+```php
+use Ginkelsoft\Buildora\Actions\PageAction;
+
+public function definePageActions(): array
+{
+    return [
+        PageAction::make('Import Products', 'products.import')
+            ->icon('fas fa-upload')
+            ->permission('product.import'),
+    ];
+}
+```
+
+<a name="example"></a>
+## Full Example
+
+```php
+<?php
+
+namespace App\Buildora\Resources;
+
+use Ginkelsoft\Buildora\Resources\BuildoraResource;
+use Ginkelsoft\Buildora\Actions\RowAction;
+use Ginkelsoft\Buildora\Actions\BulkAction;
+use Ginkelsoft\Buildora\Actions\PageAction;
+
+class ProductBuildora extends BuildoraResource
+{
+    protected string $modelClass = \App\Models\Product::class;
+
+    public function defineFields(): array
+    {
+        // ... fields
+    }
+
+    public function defineRowActions(): array
+    {
+        return [
+            RowAction::make('View', 'fas fa-eye', 'route', 'buildora.show')
+                ->params(['resource' => 'products', 'id' => 'id'])
+                ->permission('product.view'),
+
+            RowAction::make('Edit', 'fas fa-edit', 'route', 'buildora.edit')
+                ->params(['resource' => 'products', 'id' => 'id'])
+                ->permission('product.edit'),
+
+            RowAction::make('Duplicate', 'fas fa-copy', 'route', 'products.duplicate')
+                ->method('POST')
+                ->params(['id' => 'id'])
+                ->confirm('Create a copy of this product?')
+                ->permission('product.create'),
+
+            RowAction::make('Delete', 'fas fa-trash', 'route', 'buildora.destroy')
+                ->method('DELETE')
+                ->params(['resource' => 'products', 'id' => 'id'])
+                ->confirm('Delete this product?')
+                ->permission('product.delete'),
+        ];
+    }
+
+    public function defineBulkActions(): array
+    {
+        return [
+            BulkAction::make('Publish Selected', 'products.bulk-publish')
+                ->method('POST')
+                ->permission('product.publish'),
+
+            BulkAction::make('Delete Selected', 'products.bulk-delete')
+                ->method('DELETE')
+                ->permission('product.delete'),
+        ];
+    }
+
+    public function definePageActions(): array
+    {
+        return [
+            PageAction::make('Import', 'products.import')
+                ->icon('fas fa-upload')
+                ->permission('product.import'),
+
+            PageAction::make('Export All', 'products.export-all')
+                ->icon('fas fa-download')
+                ->permission('product.export'),
+        ];
+    }
+}
+```
+
+## Action Icons
+
+Common FontAwesome icons:
+
+| Action | Icon |
+|--------|------|
+| View | `fas fa-eye` |
+| Edit | `fas fa-edit` |
+| Delete | `fas fa-trash` |
+| Duplicate | `fas fa-copy` |
+| Download | `fas fa-download` |
+| Upload | `fas fa-upload` |
+| Print | `fas fa-print` |
+| Email | `fas fa-envelope` |
diff --git a/resources/docs/1.0/commands.md b/resources/docs/1.0/commands.md
new file mode 100644
index 0000000..f801eca
--- /dev/null
+++ b/resources/docs/1.0/commands.md
@@ -0,0 +1,148 @@
+# Artisan Commands
+
+---
+
+- [Resource Commands](#resource)
+- [Widget Commands](#widget)
+- [Permission Commands](#permission)
+- [User Commands](#user)
+- [Installation Commands](#installation)
+
+<a name="resource"></a>
+## Resource Commands
+
+### buildora:resource
+
+Generate a new Buildora resource for an Eloquent model.
+
+```bash
+php artisan buildora:resource {ModelName}
+```
+
+**Example:**
+```bash
+php artisan buildora:resource Product
+```
+
+Creates `app/Buildora/Resources/ProductBuildora.php` with auto-detected fields from database schema.
+
+### buildora:make-permission-resource
+
+Generate the Permission resource for managing permissions.
+
+```bash
+php artisan buildora:make-permission-resource
+```
+
+<a name="widget"></a>
+## Widget Commands
+
+### buildora:widget
+
+Interactive command to generate a widget.
+
+```bash
+php artisan buildora:widget
+```
+
+Creates:
+- Widget class: `app/Buildora/Widgets/{Name}Widget.php`
+- Blade view: `resources/views/buildora/widgets/{name}.blade.php`
+
+<a name="permission"></a>
+## Permission Commands
+
+### buildora:generate-permissions
+
+Generate permissions for all Buildora resources.
+
+```bash
+php artisan buildora:generate-permissions
+```
+
+Creates permissions: `{resource}.view`, `{resource}.create`, `{resource}.edit`, `{resource}.delete`
+
+### buildora:sync-permissions
+
+Synchronize permissions with the database.
+
+```bash
+php artisan buildora:sync-permissions
+```
+
+### buildora:grant-permissions
+
+Grant all Buildora permissions to a user.
+
+```bash
+php artisan buildora:grant-permissions {user_id}
+```
+
+### buildora:permission:grant-resource
+
+Grant all permissions for a specific resource to a user.
+
+```bash
+php artisan buildora:permission:grant-resource {user_id} {resource}
+```
+
+**Example:**
+```bash
+php artisan buildora:permission:grant-resource 1 product
+```
+
+<a name="user"></a>
+## User Commands
+
+### buildora:user:create
+
+Interactive command to create a new admin user.
+
+```bash
+php artisan buildora:user:create
+```
+
+<a name="installation"></a>
+## Installation Commands
+
+### buildora:install
+
+Run the Buildora installation wizard.
+
+```bash
+php artisan buildora:install
+```
+
+### buildora:upgrade
+
+Upgrade an existing Buildora installation.
+
+```bash
+php artisan buildora:upgrade
+```
+
+## Publishing Assets
+
+```bash
+# Publish configuration
+php artisan vendor:publish --tag=buildora-config
+
+# Publish views
+php artisan vendor:publish --tag=buildora-views
+
+# Publish theme
+php artisan vendor:publish --tag=buildora-theme
+```
+
+## Quick Reference
+
+| Command | Description |
+|---------|-------------|
+| `buildora:install` | Initial installation |
+| `buildora:upgrade` | Upgrade installation |
+| `buildora:resource {Model}` | Generate resource |
+| `buildora:widget` | Generate widget |
+| `buildora:generate-permissions` | Generate all permissions |
+| `buildora:sync-permissions` | Sync permissions |
+| `buildora:grant-permissions {id}` | Grant all permissions |
+| `buildora:user:create` | Create admin user |
diff --git a/resources/docs/1.0/configuration.md b/resources/docs/1.0/configuration.md
new file mode 100644
index 0000000..dac4046
--- /dev/null
+++ b/resources/docs/1.0/configuration.md
@@ -0,0 +1,251 @@
+# Configuration
+
+---
+
+- [Publishing Configuration](#publishing)
+- [Route Settings](#routes)
+- [Datatable Settings](#datatable)
+- [File Upload Settings](#files)
+- [Dashboard Configuration](#dashboard)
+- [Navigation](#navigation)
+- [Default Resources](#resources)
+
+<a name="publishing"></a>
+## Publishing Configuration
+
+```bash
+php artisan vendor:publish --tag=buildora-config
+```
+
+This creates `config/buildora.php` in your application.
+
+<a name="routes"></a>
+## Route Settings
+
+### Route Prefix
+
+The URL prefix for all Buildora routes:
+
+```php
+'route_prefix' => 'buildora',
+```
+
+Your admin panel will be accessible at `/buildora/...`
+
+Change to `'admin'` for URLs like `/admin/resource/users`.
+
+### Middleware
+
+Middleware applied to all Buildora routes:
+
+```php
+'middleware' => [
+    'web',
+    'buildora.auth',
+    'buildora.ensure-user-resource',
+],
+```
+
+Add your own middleware:
+
+```php
+'middleware' => [
+    'web',
+    'buildora.auth',
+    'buildora.ensure-user-resource',
+    'verified',  // Require email verification
+],
+```
+
+<a name="datatable"></a>
+## Datatable Settings
+
+Pagination options for datatables:
+
+```php
+'datatable' => [
+    'pagination' => [10, 25, 50, 100, 250],
+    'default_per_page' => 25,
+],
+```
+
+<a name="files"></a>
+## File Upload Settings
+
+Configure file upload behavior:
+
+```php
+'files' => [
+    'default_disk' => 'public',
+    'default_path' => 'uploads',
+    'max_upload_size_kb' => 2048,
+    'previewable' => ['jpg', 'jpeg', 'png', 'pdf'],
+],
+```
+
+| Option | Description |
+|--------|-------------|
+| `default_disk` | Laravel filesystem disk |
+| `default_path` | Default upload path |
+| `max_upload_size_kb` | Maximum file size in KB |
+| `previewable` | File types that show inline preview |
+
+<a name="dashboard"></a>
+## Dashboard Configuration
+
+```php
+'dashboards' => [
+    'enabled' => true,
+    'label' => 'Dashboard',
+    'icon' => 'fa fa-gauge',
+    'route' => 'buildora.dashboard',
+    'permission' => 'dashboard.view',
+    'widgets' => [
+        \App\Buildora\Widgets\StatsWidget::class,
+        \App\Buildora\Widgets\RecentActivityWidget::class,
+    ],
+],
+```
+
+| Option | Description |
+|--------|-------------|
+| `enabled` | Show dashboard in navigation |
+| `label` | Navigation label |
+| `icon` | FontAwesome icon class |
+| `route` | Dashboard route name |
+| `permission` | Required permission |
+| `widgets` | Array of widget classes |
+
+<a name="navigation"></a>
+## Navigation
+
+Define custom navigation structure:
+
+```php
+'navigation' => [
+    [
+        'label' => 'Dashboard',
+        'icon' => 'fas fa-gauge',
+        'route' => 'buildora.dashboard',
+    ],
+    [
+        'label' => 'Products',
+        'icon' => 'fas fa-box',
+        'route' => 'buildora.index',
+        'route_params' => ['resource' => 'products'],
+    ],
+    [
+        'label' => 'Settings',
+        'icon' => 'fas fa-cog',
+        'children' => [
+            [
+                'label' => 'Users',
+                'route' => 'buildora.index',
+                'route_params' => ['resource' => 'users'],
+            ],
+            [
+                'label' => 'Permissions',
+                'route' => 'buildora.index',
+                'route_params' => ['resource' => 'permissions'],
+            ],
+        ],
+    ],
+    'include_resources' => true,  // Auto-include all resources
+],
+```
+
+### Navigation Item Options
+
+| Option | Description |
+|--------|-------------|
+| `label` | Display text |
+| `icon` | FontAwesome icon |
+| `route` | Route name |
+| `route_params` | Route parameters |
+| `url` | External URL (instead of route) |
+| `children` | Nested navigation items |
+| `permission` | Required permission |
+
+<a name="resources"></a>
+## Default Resources
+
+Configure built-in resources:
+
+```php
+'resources' => [
+    'defaults' => [
+        'user' => [
+            'enabled' => true,
+            'class' => \Ginkelsoft\Buildora\Resources\Defaults\UserBuildora::class,
+        ],
+        'permission' => [
+            'enabled' => true,
+            'class' => \Ginkelsoft\Buildora\Resources\Defaults\PermissionBuildora::class,
+        ],
+    ],
+],
+```
+
+Disable a default resource:
+
+```php
+'user' => [
+    'enabled' => false,
+],
+```
+
+Use a custom class:
+
+```php
+'user' => [
+    'enabled' => true,
+    'class' => \App\Buildora\Resources\CustomUserBuildora::class,
+],
+```
+
+## Full Example
+
+```php
+<?php
+
+return [
+    'route_prefix' => 'admin',
+
+    'middleware' => [
+        'web',
+        'buildora.auth',
+        'buildora.ensure-user-resource',
+    ],
+
+    'models_namespace' => 'App\\Models\\',
+
+    'datatable' => [
+        'pagination' => [10, 25, 50, 100],
+        'default_per_page' => 25,
+    ],
+
+    'files' => [
+        'default_disk' => 'public',
+        'default_path' => 'uploads',
+        'max_upload_size_kb' => 5120,
+        'previewable' => ['jpg', 'jpeg', 'png', 'gif', 'webp', 'pdf'],
+    ],
+
+    'dashboards' => [
+        'enabled' => true,
+        'label' => 'Dashboard',
+        'icon' => 'fa fa-gauge',
+        'permission' => 'dashboard.view',
+        'widgets' => [
+            \App\Buildora\Widgets\StatsWidget::class,
+        ],
+    ],
+
+    'resources' => [
+        'defaults' => [
+            'user' => ['enabled' => true],
+            'permission' => ['enabled' => true],
+        ],
+    ],
+];
+```
diff --git a/resources/docs/1.0/fields.md b/resources/docs/1.0/fields.md
new file mode 100644
index 0000000..ae8bcc3
--- /dev/null
+++ b/resources/docs/1.0/fields.md
@@ -0,0 +1,360 @@
+# Fields
+
+---
+
+- [Introduction](#introduction)
+- [Common Methods](#common-methods)
+- [Text Input Fields](#text-fields)
+- [Date & Time Fields](#date-fields)
+- [Selection Fields](#selection-fields)
+- [Relationship Fields](#relationship-fields)
+- [Content Fields](#content-fields)
+- [File Upload Field](#file-field)
+
+<a name="introduction"></a>
+## Introduction
+
+Fields are the building blocks that define how model attributes are displayed and edited. Buildora provides 20+ field types out of the box.
+
+All fields follow a fluent API pattern:
+
+```php
+TextField::make('name', 'Display Label')
+    ->searchable()
+    ->sortable()
+    ->validation(['required', 'max:255'])
+    ->columnSpan(6);
+```
+
+<a name="common-methods"></a>
+## Common Methods
+
+These methods are available on all field types:
+
+### Display
+
+```php
+->label('Custom Label')     // Override the display label
+->help('Help text here')    // Show help text below the field
+->readonly()                // Make the field read-only
+->readonly(fn($model) => $model->is_locked)  // Conditional readonly
+```
+
+### Table & Search
+
+```php
+->sortable()                // Enable sorting in datatable
+->searchable()              // Enable searching on this field
+->searchable('custom_column')  // Search on a different column
+->notSearchable()           // Explicitly disable search
+```
+
+### Visibility
+
+Control where the field appears:
+
+```php
+->hideFromTable()           // Hide from index/list view
+->hideFromCreate()          // Hide from create form
+->hideFromEdit()            // Hide from edit form
+->hideFromDetail()          // Hide from detail/show page
+->hideFromExport()          // Hide from exports
+->hideOnForms()             // Hide from both create and edit
+```
+
+### Layout
+
+Control form layout using a 12-column grid:
+
+```php
+->columnSpan(6)             // 50% width (6 of 12 columns)
+->columnSpan(12)            // Full width
+->columnSpan(4)             // 33% width
+
+// Responsive column spans
+->columnSpan([
+    'default' => 12,        // Full width on mobile
+    'md' => 6,              // 50% on medium screens
+    'lg' => 4,              // 33% on large screens
+])
+
+->startNewRow()             // Force this field to start a new row
+```
+
+---
+
+<a name="text-fields"></a>
+## Text Input Fields
+
+### TextField
+
+Basic text input for strings.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\TextField;
+
+TextField::make('name', 'Full Name')
+    ->searchable()
+    ->sortable()
+    ->validation(['required', 'max:255']);
+```
+
+### EmailField
+
+Email input with automatic validation.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\EmailField;
+
+EmailField::make('email', 'Email Address')
+    ->searchable()
+    ->sortable();
+```
+
+### PasswordField
+
+Password input with automatic hashing.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\PasswordField;
+
+PasswordField::make('password', 'Password')
+    ->hideFromTable()
+    ->help('Leave empty to keep current password');
+```
+
+> {info} Empty passwords are ignored on update, and values are automatically hashed with `bcrypt()`.
+
+### NumberField
+
+Numeric input.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\NumberField;
+
+NumberField::make('quantity', 'Quantity')
+    ->sortable()
+    ->validation(['required', 'integer', 'min:0']);
+```
+
+### CurrencyField
+
+Formatted currency display.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\CurrencyField;
+
+CurrencyField::make('price', 'Price')
+    ->sortable();
+```
+
+---
+
+<a name="date-fields"></a>
+## Date & Time Fields
+
+### DateField
+
+Date input with customizable format.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\DateField;
+
+DateField::make('birth_date', 'Birth Date')
+    ->format('d-m-Y')       // Display format
+    ->sortable();
+```
+
+### DateTimeField
+
+Date and time input.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\DateTimeField;
+
+DateTimeField::make('published_at', 'Published At')
+    ->format('d-m-Y H:i')
+    ->sortable();
+```
+
+---
+
+<a name="selection-fields"></a>
+## Selection Fields
+
+### BooleanField
+
+Toggle/checkbox for boolean values.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\BooleanField;
+
+BooleanField::make('is_active', 'Active')
+    ->options([
+        true => 'Enabled',
+        false => 'Disabled',
+    ]);
+```
+
+### SelectField
+
+Dropdown select with static or dynamic options.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\SelectField;
+
+// Static options
+SelectField::make('status', 'Status')
+    ->options([
+        'draft' => 'Draft',
+        'published' => 'Published',
+        'archived' => 'Archived',
+    ]);
+
+// Dynamic options via closure
+SelectField::make('category_id', 'Category')
+    ->options(fn() => Category::pluck('name', 'id')->toArray());
+
+// From PHP Enum
+SelectField::make('status', 'Status')
+    ->options(OrderStatus::class);
+```
+
+### CheckboxListField
+
+Multiple checkbox selection (extends BelongsToManyField).
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\CheckboxListField;
+
+CheckboxListField::make('permissions', 'Permissions')
+    ->groupByPrefix(true, '.')  // Group by dot prefix
+    ->hideFromTable();
+```
+
+---
+
+<a name="relationship-fields"></a>
+## Relationship Fields
+
+### BelongsToField
+
+Select for BelongsTo relationships.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\BelongsToField;
+
+BelongsToField::make('category')
+    ->relatedTo(\App\Models\Category::class)
+    ->pluck('id', 'name')       // (valueColumn, displayColumn)
+    ->searchable();
+```
+
+### AsyncBelongsToField
+
+AJAX-powered select for large datasets.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\AsyncBelongsToField;
+
+AsyncBelongsToField::make('customer')
+    ->relatedTo(\App\Models\Customer::class)
+    ->pluck('id', 'name')
+    ->searchColumns(['name', 'email', 'phone'])  // Columns to search
+    ->displayUsing('name');
+```
+
+### BelongsToManyField
+
+Multi-select for many-to-many relationships.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\BelongsToManyField;
+
+BelongsToManyField::make('tags')
+    ->pluck('id', 'name')
+    ->hideFromTable();
+```
+
+---
+
+<a name="content-fields"></a>
+## Content Fields
+
+### EditorField
+
+WYSIWYG editor for editing rich content.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\EditorField;
+
+EditorField::make('body', 'Article Body')
+    ->hideFromTable()
+    ->columnSpan(12);
+```
+
+### JsonField
+
+JSON editor for structured data.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\JsonField;
+
+JsonField::make('metadata', 'Metadata')
+    ->hideFromTable()
+    ->hideFromExport();
+```
+
+### DisplayField
+
+Custom computed content.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\DisplayField;
+
+DisplayField::make('full_address', 'Address')
+    ->content(fn($model) => "{$model->street}, {$model->city}");
+```
+
+### ViewField
+
+Render a custom Blade view.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\ViewField;
+
+ViewField::make('custom_display')
+    ->view('components.order-summary')
+    ->closure(fn($model) => [
+        'total' => $model->calculateTotal(),
+        'items' => $model->items,
+    ]);
+```
+
+---
+
+<a name="file-field"></a>
+## File Upload Field
+
+### FileField
+
+File upload with preview support.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\FileField;
+
+FileField::make('document', 'Document')
+    ->disk('public')                    // Storage disk
+    ->path('documents')                 // Upload path
+    ->accept('.pdf,.doc,.docx')         // Allowed extensions
+    ->maxSize(2048)                     // Max size in KB
+    ->showPreview(true);                // Show inline preview
+
+// For images with dimension limits
+FileField::make('avatar', 'Profile Picture')
+    ->disk('public')
+    ->path('avatars')
+    ->accept('.jpg,.jpeg,.png,.webp')
+    ->imageDimensions(800, 800)         // Max width, height
+    ->showPreview(true);
+```
diff --git a/resources/docs/1.0/index.json b/resources/docs/1.0/index.json
new file mode 100644
index 0000000..a17c024
--- /dev/null
+++ b/resources/docs/1.0/index.json
@@ -0,0 +1,24 @@
+{
+    "Get Started": {
+        "Introduction": "index",
+        "Installation": "installation"
+    },
+    "Core Concepts": {
+        "Resources": "resources",
+        "Fields": "fields",
+        "Validation": "validation"
+    },
+    "Advanced Features": {
+        "Panels & Relations": "panels",
+        "Actions": "actions",
+        "Widgets": "widgets"
+    },
+    "Configuration": {
+        "Configuration": "configuration",
+        "Permissions": "permissions",
+        "Artisan Commands": "commands"
+    },
+    "Customization": {
+        "Theming": "theming"
+    }
+}
diff --git a/resources/docs/1.0/index.md b/resources/docs/1.0/index.md
new file mode 100644
index 0000000..ea57966
--- /dev/null
+++ b/resources/docs/1.0/index.md
@@ -0,0 +1,35 @@
+# Introduction
+
+---
+
+- [What is Buildora?](#what-is-buildora)
+- [Features](#features)
+- [Requirements](#requirements)
+
+<a name="what-is-buildora"></a>
+## What is Buildora?
+
+Buildora is a powerful Laravel package for building admin panels, resources, forms, datatables, widgets, and actions based on your Eloquent models with minimal configuration.
+
+It's a comprehensive CRUD engine that automatically generates beautiful, functional admin interfaces from your Laravel models.
+
+<a name="features"></a>
+## Features
+
+- **Automatic CRUD Operations** - Create, Read, Update, Delete out of the box
+- **Powerful Datatables** - Sortable, searchable, exportable tables
+- **Flexible Field System** - 20+ field types with full customization
+- **Relation Management** - Panels for HasMany, BelongsToMany relations
+- **Widget System** - Dashboard widgets and custom components
+- **Built-in Permissions** - Spatie Laravel Permission integration
+- **Modern UI** - Tailwind CSS with dark mode support
+- **Two-Factor Authentication** - Built-in 2FA support
+
+<a name="requirements"></a>
+## Requirements
+
+- PHP 8.1 or higher
+- Laravel 10, 11, or 12
+- Spatie Laravel Permission package
+
+> {info} Buildora works seamlessly with existing Laravel applications. No need to start from scratch!
diff --git a/resources/docs/1.0/installation.md b/resources/docs/1.0/installation.md
new file mode 100644
index 0000000..822b00e
--- /dev/null
+++ b/resources/docs/1.0/installation.md
@@ -0,0 +1,44 @@
+# Installation
+
+---
+
+- [Install via Composer](#composer)
+- [Run the Installer](#installer)
+- [Create Admin User](#admin-user)
+- [Access the Panel](#access)
+
+<a name="composer"></a>
+## Install via Composer
+
+```bash
+composer require ginkelsoft/buildora
+```
+
+<a name="installer"></a>
+## Run the Installer
+
+```bash
+php artisan buildora:install
+```
+
+The installer will:
+- Publish configuration files
+- Publish assets
+- Run necessary migrations
+- Optionally create an admin user
+
+<a name="admin-user"></a>
+## Create Admin User
+
+If you didn't create one during installation:
+
+```bash
+php artisan buildora:user:create
+```
+
+<a name="access"></a>
+## Access the Panel
+
+Visit `/buildora/dashboard` in your browser and log in with your admin credentials.
+
+> {primary} Congratulations! Buildora is now installed and ready to use.
diff --git a/resources/docs/1.0/panels.md b/resources/docs/1.0/panels.md
new file mode 100644
index 0000000..a6d81b3
--- /dev/null
+++ b/resources/docs/1.0/panels.md
@@ -0,0 +1,183 @@
+# Panels & Relations
+
+---
+
+- [Introduction](#introduction)
+- [Creating Panels](#creating)
+- [Inline Editing](#inline-editing)
+- [Supported Relationships](#relationships)
+- [Full Example](#example)
+
+<a name="introduction"></a>
+## Introduction
+
+Panels allow you to display and manage related data on the detail page of a resource. They integrate with Laravel's Eloquent relationships.
+
+<a name="creating"></a>
+## Creating Panels
+
+Define panels in the `definePanels()` method of your resource:
+
+```php
+use Ginkelsoft\Buildora\Layouts\Panel;
+
+public function definePanels(): array
+{
+    return [
+        Panel::relation('orders', OrderBuildora::class)
+            ->label('Customer Orders'),
+
+        Panel::relation('addresses', AddressBuildora::class)
+            ->label('Addresses'),
+    ];
+}
+```
+
+### Panel::relation()
+
+The primary method to create a panel:
+
+```php
+Panel::relation(string $relationMethod, string $resourceClass): Panel
+```
+
+**Parameters:**
+- `$relationMethod` - The name of the relationship method on your model
+- `$resourceClass` - The Buildora resource class for the related model
+
+### label()
+
+Set a custom display label:
+
+```php
+Panel::relation('orders', OrderBuildora::class)
+    ->label('Purchase History')
+```
+
+<a name="inline-editing"></a>
+## Inline Editing
+
+Enable inline CRUD operations without leaving the page:
+
+```php
+Panel::relation('items', OrderItemBuildora::class)
+    ->label('Order Items')
+    ->inlineEditing()  // Enable create, edit, and delete
+```
+
+Control which operations are allowed:
+
+```php
+// Only allow create and edit, no delete
+->inlineEditing(create: true, delete: false)
+
+// Only allow editing existing records
+->inlineEditing(create: false, delete: false)
+
+// Full control
+->inlineEditing(create: true, delete: true)
+```
+
+When `inlineEditing()` is enabled, users can:
+
+1. **Create** new related records via a modal
+2. **Edit** existing records in a modal
+3. **Delete** records with confirmation
+
+<a name="relationships"></a>
+## Supported Relationships
+
+Panels work with these Eloquent relationship types:
+
+### HasMany
+
+```php
+// Model: App\Models\Customer
+public function orders(): HasMany
+{
+    return $this->hasMany(Order::class);
+}
+
+// Resource: CustomerBuildora
+public function definePanels(): array
+{
+    return [
+        Panel::relation('orders', OrderBuildora::class)
+            ->label('Orders'),
+    ];
+}
+```
+
+### BelongsToMany
+
+```php
+// Model: App\Models\Product
+public function tags(): BelongsToMany
+{
+    return $this->belongsToMany(Tag::class);
+}
+
+// Resource: ProductBuildora
+public function definePanels(): array
+{
+    return [
+        Panel::relation('tags', TagBuildora::class)
+            ->label('Tags')
+            ->inlineEditing(),
+    ];
+}
+```
+
+> {info} Relations defined in `definePanels()` are automatically eager-loaded to prevent N+1 query problems.
+
+<a name="example"></a>
+## Full Example
+
+```php
+<?php
+
+namespace App\Buildora\Resources;
+
+use Ginkelsoft\Buildora\Resources\BuildoraResource;
+use Ginkelsoft\Buildora\Fields\Types\TextField;
+use Ginkelsoft\Buildora\Fields\Types\EmailField;
+use Ginkelsoft\Buildora\Layouts\Panel;
+
+class CustomerBuildora extends BuildoraResource
+{
+    protected string $modelClass = \App\Models\Customer::class;
+
+    public function defineFields(): array
+    {
+        return [
+            TextField::make('name', 'Customer Name')
+                ->searchable()
+                ->sortable()
+                ->columnSpan(6),
+
+            EmailField::make('email', 'Email')
+                ->searchable()
+                ->columnSpan(6),
+        ];
+    }
+
+    public function definePanels(): array
+    {
+        return [
+            // Read-only panel for orders
+            Panel::relation('orders', OrderBuildora::class)
+                ->label('Order History'),
+
+            // Inline editable addresses
+            Panel::relation('addresses', AddressBuildora::class)
+                ->label('Addresses')
+                ->inlineEditing(create: true, delete: true),
+
+            // Inline notes without delete option
+            Panel::relation('notes', NoteBuildora::class)
+                ->label('Customer Notes')
+                ->inlineEditing(create: true, delete: false),
+        ];
+    }
+}
+```
diff --git a/resources/docs/1.0/permissions.md b/resources/docs/1.0/permissions.md
new file mode 100644
index 0000000..696cda6
--- /dev/null
+++ b/resources/docs/1.0/permissions.md
@@ -0,0 +1,152 @@
+# Permissions
+
+---
+
+- [Introduction](#introduction)
+- [Permission Format](#format)
+- [Generating Permissions](#generating)
+- [Using Permissions](#using)
+- [Super Admin](#super-admin)
+
+<a name="introduction"></a>
+## Introduction
+
+Buildora integrates with [Spatie Laravel Permission](https://spatie.be/docs/laravel-permission) to provide role-based access control.
+
+<a name="format"></a>
+## Permission Format
+
+Permissions follow the format: `{resource}.{action}`
+
+| Permission | Description |
+|------------|-------------|
+| `product.view` | View product list and details |
+| `product.create` | Create new products |
+| `product.edit` | Edit existing products |
+| `product.delete` | Delete products |
+
+<a name="generating"></a>
+## Generating Permissions
+
+### Generate All Permissions
+
+```bash
+php artisan buildora:generate-permissions
+```
+
+This scans all Buildora resources and creates permissions for each.
+
+### Sync Permissions
+
+```bash
+php artisan buildora:sync-permissions
+```
+
+Synchronizes permissions, adding new ones and optionally removing unused ones.
+
+### Grant All to a User
+
+```bash
+php artisan buildora:grant-permissions {user_id}
+```
+
+### Grant Resource Permissions
+
+```bash
+php artisan buildora:permission:grant-resource {user_id} {resource}
+```
+
+Example:
+```bash
+php artisan buildora:permission:grant-resource 1 product
+```
+
+This grants `product.view`, `product.create`, `product.edit`, `product.delete` to user 1.
+
+<a name="using"></a>
+## Using Permissions
+
+### In Row Actions
+
+```php
+RowAction::make('Edit', 'fas fa-edit', 'route', 'buildora.edit')
+    ->params(['resource' => 'products', 'id' => 'id'])
+    ->permission('product.edit');
+```
+
+### In Bulk Actions
+
+```php
+BulkAction::make('Delete Selected', 'products.bulk-delete')
+    ->method('DELETE')
+    ->permission('product.delete');
+```
+
+### In Navigation
+
+```php
+'navigation' => [
+    [
+        'label' => 'Products',
+        'icon' => 'fas fa-box',
+        'route' => 'buildora.index',
+        'route_params' => ['resource' => 'products'],
+        'permission' => 'product.view',
+    ],
+],
+```
+
+### Custom Permission Prefix
+
+Override the default permission prefix in your resource:
+
+```php
+protected function permissionPrefix(): string
+{
+    return 'inventory';  // Uses inventory.view, inventory.create, etc.
+}
+```
+
+### In Blade Views
+
+```html
+@can('product.create')
+    <a href="{{ route('buildora.create', 'products') }}">
+        Create Product
+    </a>
+@endcan
+```
+
+<a name="super-admin"></a>
+## Super Admin
+
+For users who should bypass all permission checks, add this to your User model:
+
+```php
+public function hasPermissionTo($permission, $guardName = null): bool
+{
+    if ($this->hasRole('super-admin')) {
+        return true;
+    }
+
+    return parent::hasPermissionTo($permission, $guardName);
+}
+```
+
+## Setting Up Roles
+
+```php
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\Models\Permission;
+
+// Create roles
+$admin = Role::create(['name' => 'admin']);
+$editor = Role::create(['name' => 'editor']);
+
+// Assign permissions to roles
+$admin->givePermissionTo('product.view', 'product.create', 'product.edit', 'product.delete');
+$editor->givePermissionTo('product.view', 'product.edit');
+
+// Assign role to user
+$user->assignRole('editor');
+```
diff --git a/resources/docs/1.0/resources.md b/resources/docs/1.0/resources.md
new file mode 100644
index 0000000..6709f12
--- /dev/null
+++ b/resources/docs/1.0/resources.md
@@ -0,0 +1,302 @@
+# Resources
+
+---
+
+- [Introduction](#introduction)
+- [Creating a Resource](#creating)
+- [Resource Properties](#properties)
+- [Defining Fields](#fields)
+- [Optional Methods](#optional-methods)
+- [Query Customization](#query)
+- [Full Example](#example)
+
+<a name="introduction"></a>
+## Introduction
+
+Resources are the core building blocks of Buildora. Each resource represents a single Eloquent model and defines how it should be displayed and managed in the admin panel.
+
+<a name="creating"></a>
+## Creating a Resource
+
+Use the Artisan command to generate a new resource:
+
+```bash
+php artisan buildora:resource Product
+```
+
+This creates `app/Buildora/Resources/ProductBuildora.php`:
+
+```php
+<?php
+
+namespace App\Buildora\Resources;
+
+use Ginkelsoft\Buildora\Resources\BuildoraResource;
+use App\Models\Product;
+
+class ProductBuildora extends BuildoraResource
+{
+    protected string $modelClass = Product::class;
+
+    public function defineFields(): array
+    {
+        return [
+            // Define your fields here
+        ];
+    }
+}
+```
+
+<a name="properties"></a>
+## Resource Properties
+
+### Model Class
+
+Every resource must define which Eloquent model it represents:
+
+```php
+protected string $modelClass = \App\Models\Product::class;
+```
+
+### Title
+
+Override the display title (shown in navigation and headers):
+
+```php
+public function title(): string
+{
+    return 'Products';  // Default: class basename
+}
+```
+
+### URI Key
+
+The URL segment used for this resource:
+
+```php
+public function uriKey(): string
+{
+    return 'products';  // Default: lowercase model name
+}
+```
+
+### Navigation
+
+Control whether this resource appears in the sidebar:
+
+```php
+public function showInNavigation(): bool
+{
+    return true;  // Default: true
+}
+```
+
+<a name="fields"></a>
+## Defining Fields
+
+The `defineFields()` method is required. Returns an array of Field objects:
+
+```php
+public function defineFields(): array
+{
+    return [
+        TextField::make('name', 'Product Name')
+            ->searchable()
+            ->sortable()
+            ->validation(['required', 'max:255']),
+
+        NumberField::make('price', 'Price')
+            ->sortable(),
+
+        SelectField::make('status', 'Status')
+            ->options([
+                'draft' => 'Draft',
+                'published' => 'Published',
+            ]),
+
+        TextField::make('description', 'Description')
+            ->hideFromTable()
+            ->columnSpan(12),
+    ];
+}
+```
+
+<a name="optional-methods"></a>
+## Optional Methods
+
+### definePanels()
+
+Define relation panels for the detail page:
+
+```php
+public function definePanels(): array
+{
+    return [
+        Panel::relation('orders', OrderBuildora::class)
+            ->label('Orders'),
+
+        Panel::relation('reviews', ReviewBuildora::class)
+            ->label('Customer Reviews')
+            ->inlineEditing(),
+    ];
+}
+```
+
+### defineRowActions()
+
+Add custom actions for individual records:
+
+```php
+public function defineRowActions(): array
+{
+    return [
+        RowAction::make('Duplicate', 'fas fa-copy', 'route', 'products.duplicate')
+            ->method('POST')
+            ->confirm('Are you sure you want to duplicate this product?'),
+    ];
+}
+```
+
+### defineBulkActions()
+
+Add actions for multiple selected records:
+
+```php
+public function defineBulkActions(): array
+{
+    return [
+        BulkAction::make('Publish Selected', 'products.bulk-publish')
+            ->method('POST')
+            ->permission('product.publish'),
+    ];
+}
+```
+
+### defineWidgets()
+
+Add widgets to the resource index page:
+
+```php
+public function defineWidgets(): array
+{
+    return [
+        ProductStatsWidget::make()
+            ->colSpan(6),
+    ];
+}
+```
+
+### searchResultConfig()
+
+Configure how this resource appears in global search:
+
+```php
+public function searchResultConfig(): array
+{
+    return [
+        'label' => 'name',  // Field(s) for the result label
+        'columns' => ['name', 'sku', 'price'],  // Columns to display
+    ];
+}
+```
+
+<a name="query"></a>
+## Query Customization
+
+Override the base query for all resource operations:
+
+```php
+public static function query(): BuildoraQueryBuilder
+{
+    return parent::query()
+        ->where('active', true)
+        ->orderBy('created_at', 'desc');
+}
+```
+
+<a name="example"></a>
+## Full Example
+
+```php
+<?php
+
+namespace App\Buildora\Resources;
+
+use Ginkelsoft\Buildora\Resources\BuildoraResource;
+use Ginkelsoft\Buildora\Fields\Types\TextField;
+use Ginkelsoft\Buildora\Fields\Types\NumberField;
+use Ginkelsoft\Buildora\Fields\Types\SelectField;
+use Ginkelsoft\Buildora\Fields\Types\BooleanField;
+use Ginkelsoft\Buildora\Fields\Types\FileField;
+use Ginkelsoft\Buildora\Fields\Types\BelongsToField;
+use Ginkelsoft\Buildora\Layouts\Panel;
+use App\Models\Product;
+
+class ProductBuildora extends BuildoraResource
+{
+    protected string $modelClass = Product::class;
+
+    public function title(): string
+    {
+        return 'Products';
+    }
+
+    public function defineFields(): array
+    {
+        return [
+            TextField::make('name', 'Product Name')
+                ->searchable()
+                ->sortable()
+                ->validation(['required', 'max:255'])
+                ->columnSpan(6),
+
+            TextField::make('sku', 'SKU')
+                ->searchable()
+                ->columnSpan(6),
+
+            BelongsToField::make('category')
+                ->relatedTo(\App\Models\Category::class)
+                ->pluck('id', 'name')
+                ->columnSpan(6),
+
+            NumberField::make('price', 'Price')
+                ->sortable()
+                ->validation(['required', 'numeric', 'min:0'])
+                ->columnSpan(6),
+
+            SelectField::make('status', 'Status')
+                ->options([
+                    'draft' => 'Draft',
+                    'published' => 'Published',
+                    'archived' => 'Archived',
+                ])
+                ->columnSpan(6),
+
+            BooleanField::make('featured', 'Featured Product')
+                ->columnSpan(6),
+
+            FileField::make('image', 'Product Image')
+                ->disk('public')
+                ->path('products')
+                ->columnSpan(12),
+        ];
+    }
+
+    public function definePanels(): array
+    {
+        return [
+            Panel::relation('variants', ProductVariantBuildora::class)
+                ->label('Variants')
+                ->inlineEditing(),
+        ];
+    }
+
+    public function searchResultConfig(): array
+    {
+        return [
+            'label' => 'name',
+            'columns' => ['sku', 'price'],
+        ];
+    }
+}
+```
diff --git a/resources/docs/1.0/theming.md b/resources/docs/1.0/theming.md
new file mode 100644
index 0000000..476b8da
--- /dev/null
+++ b/resources/docs/1.0/theming.md
@@ -0,0 +1,154 @@
+# Theming
+
+---
+
+- [Publishing the Theme](#publishing)
+- [CSS Variables](#variables)
+- [Dark Mode](#dark-mode)
+- [Theme Presets](#presets)
+
+<a name="publishing"></a>
+## Publishing the Theme
+
+```bash
+php artisan vendor:publish --tag=buildora-theme
+```
+
+This creates `resources/buildora/buildora-theme.css` in your Laravel application.
+
+<a name="variables"></a>
+## CSS Variables
+
+### Colors
+
+```css
+:root {
+    /* Primary/Accent Colors */
+    --accent-color: #667eea;
+    --accent-hover: #5a6fd6;
+
+    /* Background Colors */
+    --bg-primary: #f8fafc;
+    --bg-secondary: #ffffff;
+    --bg-card: #ffffff;
+    --bg-dropdown: #ffffff;
+    --bg-input: #ffffff;
+    --bg-sidebar: #1e293b;
+
+    /* Text Colors */
+    --text-primary: #1e293b;
+    --text-secondary: #475569;
+    --text-muted: #94a3b8;
+    --text-sidebar: #e2e8f0;
+
+    /* Border Colors */
+    --border-color: #e2e8f0;
+
+    /* Status Colors */
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --info: #3b82f6;
+}
+```
+
+<a name="dark-mode"></a>
+## Dark Mode
+
+Dark mode is automatically applied based on the `dark` class on the HTML element:
+
+```css
+.dark {
+    --bg-primary: #0f172a;
+    --bg-secondary: #1e293b;
+    --bg-card: #1e293b;
+    --bg-dropdown: #334155;
+    --bg-input: #334155;
+
+    --text-primary: #f1f5f9;
+    --text-secondary: #cbd5e1;
+    --text-muted: #64748b;
+
+    --border-color: #334155;
+}
+```
+
+Buildora includes a theme switcher with three options:
+- **Light** - Force light mode
+- **Dark** - Force dark mode
+- **System** - Follow OS preference
+
+<a name="presets"></a>
+## Theme Presets
+
+### Blue Theme (Default)
+
+```css
+:root {
+    --accent-color: #667eea;
+    --accent-hover: #5a6fd6;
+}
+```
+
+### Green Theme
+
+```css
+:root {
+    --accent-color: #10b981;
+    --accent-hover: #059669;
+}
+```
+
+### Purple Theme
+
+```css
+:root {
+    --accent-color: #8b5cf6;
+    --accent-hover: #7c3aed;
+}
+```
+
+### Orange Theme
+
+```css
+:root {
+    --accent-color: #f97316;
+    --accent-hover: #ea580c;
+}
+```
+
+## Custom Example
+
+Edit `resources/buildora/buildora-theme.css`:
+
+```css
+:root {
+    /* Custom brand color */
+    --accent-color: #0ea5e9;
+    --accent-hover: #0284c7;
+
+    /* Custom sidebar */
+    --bg-sidebar: #0c4a6e;
+    --text-sidebar: #e0f2fe;
+}
+
+.dark {
+    --accent-color: #38bdf8;
+}
+```
+
+## Using Custom Fonts
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+    --font-family: 'Inter', sans-serif;
+}
+
+body {
+    font-family: var(--font-family);
+}
+```
+
+> {primary} Using CSS variables ensures consistent styling across light and dark modes.
diff --git a/resources/docs/1.0/validation.md b/resources/docs/1.0/validation.md
new file mode 100644
index 0000000..917e789
--- /dev/null
+++ b/resources/docs/1.0/validation.md
@@ -0,0 +1,155 @@
+# Validation
+
+---
+
+- [Basic Validation](#basic)
+- [Dynamic Validation](#dynamic)
+- [Common Patterns](#patterns)
+- [Password Validation](#password)
+
+<a name="basic"></a>
+## Basic Validation
+
+Use the `validation()` method with an array of Laravel validation rules:
+
+```php
+TextField::make('name', 'Name')
+    ->validation(['required', 'max:255']);
+
+EmailField::make('email', 'Email')
+    ->validation(['required', 'email', 'unique:users,email']);
+
+NumberField::make('price', 'Price')
+    ->validation(['required', 'numeric', 'min:0', 'max:99999.99']);
+```
+
+<a name="dynamic"></a>
+## Dynamic Validation
+
+Use a closure for context-aware validation rules:
+
+```php
+TextField::make('name', 'Name')
+    ->validation(function ($model) {
+        $rules = ['required', 'max:255'];
+
+        // Add unique rule, ignoring current record on edit
+        if ($model->exists) {
+            $rules[] = 'unique:products,name,' . $model->id;
+        } else {
+            $rules[] = 'unique:products,name';
+        }
+
+        return $rules;
+    });
+```
+
+### Conditional Validation
+
+Apply different rules based on model state:
+
+```php
+NumberField::make('discount_percentage', 'Discount %')
+    ->validation(function ($model) {
+        if ($model->has_discount) {
+            return ['required', 'numeric', 'min:1', 'max:100'];
+        }
+        return ['nullable', 'numeric', 'min:0', 'max:100'];
+    });
+```
+
+<a name="patterns"></a>
+## Common Patterns
+
+### Required Fields
+
+```php
+TextField::make('title', 'Title')
+    ->validation(['required']);
+```
+
+### String Length
+
+```php
+TextField::make('name', 'Name')
+    ->validation(['required', 'min:2', 'max:255']);
+```
+
+### Numeric Values
+
+```php
+NumberField::make('quantity', 'Quantity')
+    ->validation(['required', 'integer', 'min:0']);
+
+NumberField::make('price', 'Price')
+    ->validation(['required', 'numeric', 'min:0', 'max:99999.99']);
+```
+
+### Unique Values
+
+```php
+// Simple unique
+TextField::make('slug', 'Slug')
+    ->validation(['required', 'unique:products,slug']);
+
+// Unique with exception for current record
+TextField::make('email', 'Email')
+    ->validation(fn($model) => [
+        'required',
+        'email',
+        $model->exists
+            ? 'unique:users,email,' . $model->id
+            : 'unique:users,email'
+    ]);
+```
+
+### Date Validation
+
+```php
+DateField::make('start_date', 'Start Date')
+    ->validation(['required', 'date', 'after:today']);
+
+DateField::make('end_date', 'End Date')
+    ->validation(['required', 'date', 'after:start_date']);
+```
+
+### File Validation
+
+```php
+FileField::make('document', 'Document')
+    ->validation(['nullable', 'file', 'mimes:pdf,doc,docx', 'max:5120']);
+
+FileField::make('image', 'Image')
+    ->validation(['nullable', 'image', 'mimes:jpg,jpeg,png', 'max:2048']);
+```
+
+### Enum/In Validation
+
+```php
+SelectField::make('status', 'Status')
+    ->options(['draft', 'published', 'archived'])
+    ->validation(['required', 'in:draft,published,archived']);
+```
+
+### Relationship Validation
+
+```php
+BelongsToField::make('category')
+    ->validation(['required', 'exists:categories,id']);
+```
+
+<a name="password"></a>
+## Password Validation
+
+Buildora handles passwords specially:
+
+```php
+PasswordField::make('password', 'Password')
+    ->validation(fn($model) => $model->exists
+        ? ['nullable', 'min:8', 'confirmed']  // Optional on edit
+        : ['required', 'min:8', 'confirmed']   // Required on create
+    )
+    ->help('Leave empty to keep current password');
+```
+
+> {info} Empty password fields are automatically ignored during updates.
diff --git a/resources/docs/1.0/widgets.md b/resources/docs/1.0/widgets.md
new file mode 100644
index 0000000..fdbd633
--- /dev/null
+++ b/resources/docs/1.0/widgets.md
@@ -0,0 +1,244 @@
+# Widgets
+
+---
+
+- [Introduction](#introduction)
+- [Creating a Widget](#creating)
+- [Widget Configuration](#configuration)
+- [Using Widgets](#using)
+- [Examples](#examples)
+
+<a name="introduction"></a>
+## Introduction
+
+Widgets are reusable components that display information on dashboards and resource pages. They're perfect for statistics, charts, quick actions, and custom content.
+
+<a name="creating"></a>
+## Creating a Widget
+
+Use the Artisan command to generate a widget:
+
+```bash
+php artisan buildora:widget
+```
+
+This interactive command will:
+1. Ask for the widget name
+2. Generate the widget class
+3. Create the Blade view
+
+### Manual Creation
+
+Create a widget class in `app/Buildora/Widgets/`:
+
+```php
+<?php
+
+namespace App\Buildora\Widgets;
+
+use Ginkelsoft\Buildora\Widgets\BuildoraWidget;
+use Illuminate\View\View;
+
+class SalesOverviewWidget extends BuildoraWidget
+{
+    public function render(): View
+    {
+        $totalSales = Order::sum('total');
+        $orderCount = Order::count();
+
+        return view('buildora.widgets.sales-overview', [
+            'totalSales' => $totalSales,
+            'orderCount' => $orderCount,
+        ]);
+    }
+}
+```
+
+Create the Blade view at `resources/views/buildora/widgets/sales-overview.blade.php`:
+
+```html
+<div class="p-6 rounded-xl" style="background: var(--bg-card); border: 1px solid var(--border-color);">
+    <h3 class="text-lg font-semibold mb-4" style="color: var(--text-primary);">
+        Sales Overview
+    </h3>
+
+    <div class="grid grid-cols-2 gap-4">
+        <div>
+            <p class="text-sm" style="color: var(--text-muted);">Total Sales</p>
+            <p class="text-2xl font-bold" style="color: var(--text-primary);">
+                € {{ number_format($totalSales, 2, ',', '.') }}
+            </p>
+        </div>
+        <div>
+            <p class="text-sm" style="color: var(--text-muted);">Orders</p>
+            <p class="text-2xl font-bold" style="color: var(--text-primary);">
+                {{ $orderCount }}
+            </p>
+        </div>
+    </div>
+</div>
+```
+
+<a name="configuration"></a>
+## Widget Configuration
+
+### Column Span
+
+Control the widget width using a 12-column grid:
+
+```php
+SalesOverviewWidget::make()
+    ->colSpan(6)  // 50% width
+```
+
+Responsive column spans:
+
+```php
+->colSpan([
+    'default' => 12,  // Full width on mobile
+    'md' => 6,        // 50% on medium screens
+    'lg' => 4,        // 33% on large screens
+])
+```
+
+### Accessing Resource & Model
+
+Widgets can access the current resource and model:
+
+```php
+public function render(): View
+{
+    $resource = $this->getResource();
+    $model = $this->getModel();
+
+    return view('buildora.widgets.custom', [
+        'resourceTitle' => $resource?->title(),
+        'modelId' => $model?->id,
+    ]);
+}
+```
+
+### Page Visibility
+
+Control which pages the widget appears on:
+
+```php
+public function pageVisibility(): array
+{
+    return ['index'];  // Default: only on index page
+}
+
+// Show on multiple pages
+public function pageVisibility(): array
+{
+    return ['index', 'detail', 'create', 'edit'];
+}
+```
+
+<a name="using"></a>
+## Using Widgets
+
+### In Resources
+
+Add widgets to a resource's index page:
+
+```php
+public function defineWidgets(): array
+{
+    return [
+        SalesOverviewWidget::make()
+            ->colSpan(12),
+
+        NewOrdersWidget::make()
+            ->colSpan(6),
+
+        TopProductsWidget::make()
+            ->colSpan(6),
+    ];
+}
+```
+
+### On Dashboard
+
+Configure dashboard widgets in `config/buildora.php`:
+
+```php
+'dashboards' => [
+    'enabled' => true,
+    'widgets' => [
+        \App\Buildora\Widgets\TotalUsersWidget::class,
+        \App\Buildora\Widgets\RevenueWidget::class,
+    ],
+],
+```
+
+<a name="examples"></a>
+## Examples
+
+### Statistics Card
+
+```php
+class TotalUsersWidget extends BuildoraWidget
+{
+    public function render(): View
+    {
+        return view('buildora.widgets.stat-card', [
+            'title' => 'Total Users',
+            'value' => User::count(),
+            'icon' => 'fas fa-users',
+            'color' => '#667eea',
+        ]);
+    }
+}
+```
+
+```html
+{{-- stat-card.blade.php --}}
+<div class="p-6 rounded-xl" style="background: var(--bg-card); border: 1px solid var(--border-color);">
+    <div class="flex items-center justify-between">
+        <div>
+            <p class="text-sm font-medium" style="color: var(--text-muted);">{{ $title }}</p>
+            <p class="text-3xl font-bold mt-1" style="color: var(--text-primary);">
+                {{ number_format($value) }}
+            </p>
+        </div>
+        <div class="w-12 h-12 rounded-xl flex items-center justify-center"
+             style="background: {{ $color }}20;">
+            <i class="{{ $icon }} text-xl" style="color: {{ $color }};"></i>
+        </div>
+    </div>
+</div>
+```
+
+### Recent Records Widget
+
+```php
+class RecentOrdersWidget extends BuildoraWidget
+{
+    public function render(): View
+    {
+        $orders = Order::with('customer')
+            ->latest()
+            ->take(5)
+            ->get();
+
+        return view('buildora.widgets.recent-orders', [
+            'orders' => $orders,
+        ]);
+    }
+}
+```
+
+## Styling Guidelines
+
+Use CSS variables for consistent theming:
+
+```css
+var(--bg-card)           /* Card background */
+var(--border-color)      /* Border color */
+var(--text-primary)      /* Primary text */
+var(--text-muted)        /* Muted/helper text */
+var(--accent-color)      /* Accent/link color */
+```
+
+> {primary} Using CSS variables ensures your widgets look correct in both light and dark modes.
diff --git a/resources/lang/en/buildora.php b/resources/lang/en/buildora.php
index 1a3a277..27de912 100644
--- a/resources/lang/en/buildora.php
+++ b/resources/lang/en/buildora.php
@@ -169,4 +169,36 @@
 
     // Inline relation editing
     'Are you sure you want to delete this record?' => 'Are you sure you want to delete this record?',
+
+    // Settings page
+    'Buildora Settings' => 'Buildora Settings',
+    'Manage your Buildora installation and system settings.' => 'Manage your Buildora installation and system settings.',
+    'Permissions' => 'Permissions',
+    'Synchronize permissions for all Buildora resources.' => 'Synchronize permissions for all Buildora resources.',
+    'permissions' => 'permissions',
+    'This will scan all Buildora resources and create the necessary permissions (view, create, edit, delete) for each resource.' => 'This will scan all Buildora resources and create the necessary permissions (view, create, edit, delete) for each resource.',
+    'Sync Permissions' => 'Sync Permissions',
+    'Permissions synchronized successfully.' => 'Permissions synchronized successfully.',
+    'Cache Management' => 'Cache Management',
+    'Clear application caches to refresh data.' => 'Clear application caches to refresh data.',
+    'Cache Driver' => 'Cache Driver',
+    'Session Driver' => 'Session Driver',
+    'Queue Driver' => 'Queue Driver',
+    'Clear Cache' => 'Clear Cache',
+    'Cache cleared successfully.' => 'Cache cleared successfully.',
+    'Resources' => 'Resources',
+    'Overview of registered Buildora resources.' => 'Overview of registered Buildora resources.',
+    'Total Resources' => 'Total Resources',
+    'Generate a new resource using:' => 'Generate a new resource using:',
+    'System Information' => 'System Information',
+    'PHP Version' => 'PHP Version',
+    'Laravel Version' => 'Laravel Version',
+    'Buildora Version' => 'Buildora Version',
+    'Environment' => 'Environment',
+    'Debug Mode' => 'Debug Mode',
+    'Quick Stats' => 'Quick Stats',
+    'Users' => 'Users',
+    'Documentation' => 'Documentation',
+    'Learn how to use Buildora effectively.' => 'Learn how to use Buildora effectively.',
+    'View Documentation' => 'View Documentation',
 ];
diff --git a/resources/lang/nl/buildora.php b/resources/lang/nl/buildora.php
index 67d5aeb..488828f 100644
--- a/resources/lang/nl/buildora.php
+++ b/resources/lang/nl/buildora.php
@@ -170,4 +170,36 @@
 
     // Inline relation editing
     'Are you sure you want to delete this record?' => 'Weet je zeker dat je dit record wilt verwijderen?',
+
+    // Settings page
+    'Buildora Settings' => 'Buildora Instellingen',
+    'Manage your Buildora installation and system settings.' => 'Beheer je Buildora installatie en systeeminstellingen.',
+    'Permissions' => 'Permissies',
+    'Synchronize permissions for all Buildora resources.' => 'Synchroniseer permissies voor alle Buildora resources.',
+    'permissions' => 'permissies',
+    'This will scan all Buildora resources and create the necessary permissions (view, create, edit, delete) for each resource.' => 'Dit scant alle Buildora resources en maakt de benodigde permissies (bekijken, aanmaken, bewerken, verwijderen) voor elke resource.',
+    'Sync Permissions' => 'Synchroniseer Permissies',
+    'Permissions synchronized successfully.' => 'Permissies succesvol gesynchroniseerd.',
+    'Cache Management' => 'Cache Beheer',
+    'Clear application caches to refresh data.' => 'Wis applicatie caches om data te vernieuwen.',
+    'Cache Driver' => 'Cache Driver',
+    'Session Driver' => 'Sessie Driver',
+    'Queue Driver' => 'Queue Driver',
+    'Clear Cache' => 'Cache Wissen',
+    'Cache cleared successfully.' => 'Cache succesvol gewist.',
+    'Resources' => 'Resources',
+    'Overview of registered Buildora resources.' => 'Overzicht van geregistreerde Buildora resources.',
+    'Total Resources' => 'Totaal Resources',
+    'Generate a new resource using:' => 'Genereer een nieuwe resource met:',
+    'System Information' => 'Systeeminformatie',
+    'PHP Version' => 'PHP Versie',
+    'Laravel Version' => 'Laravel Versie',
+    'Buildora Version' => 'Buildora Versie',
+    'Environment' => 'Omgeving',
+    'Debug Mode' => 'Debug Modus',
+    'Quick Stats' => 'Snelle Statistieken',
+    'Users' => 'Gebruikers',
+    'Documentation' => 'Documentatie',
+    'Learn how to use Buildora effectively.' => 'Leer hoe je Buildora effectief gebruikt.',
+    'View Documentation' => 'Bekijk Documentatie',
 ];
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
new file mode 100644
index 0000000..57b311b
--- /dev/null
+++ b/resources/views/settings/index.blade.php
@@ -0,0 +1,334 @@
+<x-buildora-layout>
+    <div class="max-w-6xl mx-auto" x-data="buildoraSettings()">
+        {{-- Header --}}
+        <div class="mb-8">
+            <h1 class="text-2xl font-bold" style="color: var(--text-primary);">
+                {{ __buildora('Buildora Settings') }}
+            </h1>
+            <p class="mt-1" style="color: var(--text-muted);">
+                {{ __buildora('Manage your Buildora installation and system settings.') }}
+            </p>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            {{-- Left Column: Actions --}}
+            <div class="lg:col-span-2 space-y-6">
+
+                {{-- Permissions Card --}}
+                <div class="rounded-2xl p-6" style="background: var(--bg-card); border: 1px solid var(--border-color);">
+                    <div class="flex items-start justify-between">
+                        <div>
+                            <h2 class="text-lg font-semibold flex items-center gap-2" style="color: var(--text-primary);">
+                                <i class="fas fa-shield-alt" style="color: var(--accent-color);"></i>
+                                {{ __buildora('Permissions') }}
+                            </h2>
+                            <p class="mt-1 text-sm" style="color: var(--text-muted);">
+                                {{ __buildora('Synchronize permissions for all Buildora resources.') }}
+                            </p>
+                        </div>
+                        <span class="px-3 py-1 text-sm font-medium rounded-full"
+                              style="background: rgba(102, 126, 234, 0.1); color: var(--accent-color);">
+                            <span x-text="stats.permission_count">{{ $stats['permission_count'] }}</span> {{ __buildora('permissions') }}
+                        </span>
+                    </div>
+
+                    <div class="mt-4 p-4 rounded-xl" style="background: var(--bg-primary);">
+                        <p class="text-sm" style="color: var(--text-secondary);">
+                            {{ __buildora('This will scan all Buildora resources and create the necessary permissions (view, create, edit, delete) for each resource.') }}
+                        </p>
+                    </div>
+
+                    <div class="mt-4 flex items-center gap-3">
+                        <button type="button"
+                                @click="syncPermissions()"
+                                :disabled="loading.permissions"
+                                class="inline-flex items-center gap-2 px-4 py-2.5 btn-primary text-white font-medium rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 disabled:opacity-50">
+                            <i class="fas fa-sync-alt" :class="loading.permissions && 'animate-spin'"></i>
+                            {{ __buildora('Sync Permissions') }}
+                        </button>
+
+                        <span x-show="messages.permissions"
+                              x-transition
+                              class="text-sm"
+                              :class="messages.permissionsSuccess ? 'text-green-500' : 'text-red-500'"
+                              x-text="messages.permissions">
+                        </span>
+                    </div>
+                </div>
+
+                {{-- Cache Card --}}
+                <div class="rounded-2xl p-6" style="background: var(--bg-card); border: 1px solid var(--border-color);">
+                    <div class="flex items-start justify-between">
+                        <div>
+                            <h2 class="text-lg font-semibold flex items-center gap-2" style="color: var(--text-primary);">
+                                <i class="fas fa-database" style="color: #f59e0b;"></i>
+                                {{ __buildora('Cache Management') }}
+                            </h2>
+                            <p class="mt-1 text-sm" style="color: var(--text-muted);">
+                                {{ __buildora('Clear application caches to refresh data.') }}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="mt-4 p-4 rounded-xl" style="background: var(--bg-primary);">
+                        <div class="grid grid-cols-3 gap-4 text-sm">
+                            <div>
+                                <span style="color: var(--text-muted);">{{ __buildora('Cache Driver') }}</span>
+                                <p class="font-medium" style="color: var(--text-primary);">{{ $stats['cache_driver'] }}</p>
+                            </div>
+                            <div>
+                                <span style="color: var(--text-muted);">{{ __buildora('Session Driver') }}</span>
+                                <p class="font-medium" style="color: var(--text-primary);">{{ $stats['session_driver'] }}</p>
+                            </div>
+                            <div>
+                                <span style="color: var(--text-muted);">{{ __buildora('Queue Driver') }}</span>
+                                <p class="font-medium" style="color: var(--text-primary);">{{ $stats['queue_driver'] }}</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mt-4 flex items-center gap-3">
+                        <button type="button"
+                                @click="clearCache()"
+                                :disabled="loading.cache"
+                                class="inline-flex items-center gap-2 px-4 py-2.5 font-medium rounded-xl transition-all duration-200 disabled:opacity-50"
+                                style="background: #f59e0b; color: white;">
+                            <i class="fas fa-broom" :class="loading.cache && 'animate-spin'"></i>
+                            {{ __buildora('Clear Cache') }}
+                        </button>
+
+                        <span x-show="messages.cache"
+                              x-transition
+                              class="text-sm"
+                              :class="messages.cacheSuccess ? 'text-green-500' : 'text-red-500'"
+                              x-text="messages.cache">
+                        </span>
+                    </div>
+                </div>
+
+                {{-- Resources Card --}}
+                <div class="rounded-2xl p-6" style="background: var(--bg-card); border: 1px solid var(--border-color);">
+                    <h2 class="text-lg font-semibold flex items-center gap-2" style="color: var(--text-primary);">
+                        <i class="fas fa-cubes" style="color: #10b981;"></i>
+                        {{ __buildora('Resources') }}
+                    </h2>
+                    <p class="mt-1 text-sm" style="color: var(--text-muted);">
+                        {{ __buildora('Overview of registered Buildora resources.') }}
+                    </p>
+
+                    <div class="mt-4 p-4 rounded-xl" style="background: var(--bg-primary);">
+                        <div class="flex items-center justify-between">
+                            <span style="color: var(--text-secondary);">{{ __buildora('Total Resources') }}</span>
+                            <span class="text-xl font-bold" style="color: var(--text-primary);">{{ $stats['resource_count'] }}</span>
+                        </div>
+                    </div>
+
+                    <div class="mt-4">
+                        <p class="text-sm" style="color: var(--text-muted);">
+                            {{ __buildora('Generate a new resource using:') }}
+                        </p>
+                        <code class="mt-2 block p-3 rounded-lg text-sm font-mono"
+                              style="background: var(--bg-primary); color: var(--accent-color);">
+                            php artisan buildora:resource ModelName
+                        </code>
+                    </div>
+                </div>
+            </div>
+
+            {{-- Right Column: System Info --}}
+            <div class="space-y-6">
+                {{-- System Information --}}
+                <div class="rounded-2xl p-6" style="background: var(--bg-card); border: 1px solid var(--border-color);">
+                    <h2 class="text-lg font-semibold flex items-center gap-2 mb-4" style="color: var(--text-primary);">
+                        <i class="fas fa-info-circle" style="color: var(--accent-color);"></i>
+                        {{ __buildora('System Information') }}
+                    </h2>
+
+                    <div class="space-y-4">
+                        <div class="flex items-center justify-between py-2" style="border-bottom: 1px solid var(--border-color);">
+                            <span class="text-sm" style="color: var(--text-muted);">{{ __buildora('PHP Version') }}</span>
+                            <span class="text-sm font-medium" style="color: var(--text-primary);">{{ $stats['php_version'] }}</span>
+                        </div>
+
+                        <div class="flex items-center justify-between py-2" style="border-bottom: 1px solid var(--border-color);">
+                            <span class="text-sm" style="color: var(--text-muted);">{{ __buildora('Laravel Version') }}</span>
+                            <span class="text-sm font-medium" style="color: var(--text-primary);">{{ $stats['laravel_version'] }}</span>
+                        </div>
+
+                        <div class="flex items-center justify-between py-2" style="border-bottom: 1px solid var(--border-color);">
+                            <span class="text-sm" style="color: var(--text-muted);">{{ __buildora('Buildora Version') }}</span>
+                            <span class="text-sm font-medium" style="color: var(--accent-color);">{{ $stats['buildora_version'] }}</span>
+                        </div>
+
+                        <div class="flex items-center justify-between py-2" style="border-bottom: 1px solid var(--border-color);">
+                            <span class="text-sm" style="color: var(--text-muted);">{{ __buildora('Environment') }}</span>
+                            <span class="px-2 py-0.5 text-xs font-medium rounded-full"
+                                  style="background: {{ $stats['environment'] === 'production' ? '#10b981' : '#f59e0b' }}20; color: {{ $stats['environment'] === 'production' ? '#10b981' : '#f59e0b' }};">
+                                {{ $stats['environment'] }}
+                            </span>
+                        </div>
+
+                        <div class="flex items-center justify-between py-2">
+                            <span class="text-sm" style="color: var(--text-muted);">{{ __buildora('Debug Mode') }}</span>
+                            <span class="px-2 py-0.5 text-xs font-medium rounded-full"
+                                  style="background: {{ $stats['debug_mode'] ? '#ef4444' : '#10b981' }}20; color: {{ $stats['debug_mode'] ? '#ef4444' : '#10b981' }};">
+                                {{ $stats['debug_mode'] ? 'ON' : 'OFF' }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                {{-- Quick Stats --}}
+                <div class="rounded-2xl p-6" style="background: var(--bg-card); border: 1px solid var(--border-color);">
+                    <h2 class="text-lg font-semibold flex items-center gap-2 mb-4" style="color: var(--text-primary);">
+                        <i class="fas fa-chart-bar" style="color: #10b981;"></i>
+                        {{ __buildora('Quick Stats') }}
+                    </h2>
+
+                    <div class="space-y-4">
+                        <div class="p-4 rounded-xl" style="background: var(--bg-primary);">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: rgba(102, 126, 234, 0.1);">
+                                    <i class="fas fa-users" style="color: var(--accent-color);"></i>
+                                </div>
+                                <div>
+                                    <p class="text-2xl font-bold" style="color: var(--text-primary);">{{ $stats['user_count'] }}</p>
+                                    <p class="text-xs" style="color: var(--text-muted);">{{ __buildora('Users') }}</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="p-4 rounded-xl" style="background: var(--bg-primary);">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: rgba(16, 185, 129, 0.1);">
+                                    <i class="fas fa-cubes" style="color: #10b981;"></i>
+                                </div>
+                                <div>
+                                    <p class="text-2xl font-bold" style="color: var(--text-primary);">{{ $stats['resource_count'] }}</p>
+                                    <p class="text-xs" style="color: var(--text-muted);">{{ __buildora('Resources') }}</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="p-4 rounded-xl" style="background: var(--bg-primary);">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: rgba(245, 158, 11, 0.1);">
+                                    <i class="fas fa-shield-alt" style="color: #f59e0b;"></i>
+                                </div>
+                                <div>
+                                    <p class="text-2xl font-bold" style="color: var(--text-primary);" x-text="stats.permission_count">{{ $stats['permission_count'] }}</p>
+                                    <p class="text-xs" style="color: var(--text-muted);">{{ __buildora('Permissions') }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {{-- Documentation Link --}}
+                <div class="rounded-2xl p-6" style="background: linear-gradient(135deg, var(--accent-color), #818cf8);">
+                    <h2 class="text-lg font-semibold text-white flex items-center gap-2 mb-2">
+                        <i class="fas fa-book"></i>
+                        {{ __buildora('Documentation') }}
+                    </h2>
+                    <p class="text-sm text-white/80 mb-4">
+                        {{ __buildora('Learn how to use Buildora effectively.') }}
+                    </p>
+                    <a href="https://buildora.dev/docs" target="_blank"
+                       class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white text-sm font-medium rounded-lg transition-colors">
+                        <i class="fas fa-external-link-alt"></i>
+                        {{ __buildora('View Documentation') }}
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+    function buildoraSettings() {
+        return {
+            stats: {
+                permission_count: {{ $stats['permission_count'] }}
+            },
+            loading: {
+                permissions: false,
+                cache: false
+            },
+            messages: {
+                permissions: '',
+                permissionsSuccess: false,
+                cache: '',
+                cacheSuccess: false
+            },
+
+            async syncPermissions() {
+                this.loading.permissions = true;
+                this.messages.permissions = '';
+
+                try {
+                    const response = await fetch('{{ route("buildora.settings.sync-permissions") }}', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json',
+                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
+                        }
+                    });
+
+                    const data = await response.json();
+
+                    if (data.success) {
+                        this.messages.permissions = data.message;
+                        this.messages.permissionsSuccess = true;
+                        this.stats.permission_count = data.permission_count;
+                    } else {
+                        this.messages.permissions = data.message || 'An error occurred';
+                        this.messages.permissionsSuccess = false;
+                    }
+                } catch (error) {
+                    this.messages.permissions = error.message;
+                    this.messages.permissionsSuccess = false;
+                } finally {
+                    this.loading.permissions = false;
+                    setTimeout(() => {
+                        this.messages.permissions = '';
+                    }, 5000);
+                }
+            },
+
+            async clearCache() {
+                this.loading.cache = true;
+                this.messages.cache = '';
+
+                try {
+                    const response = await fetch('{{ route("buildora.settings.clear-cache") }}', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json',
+                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
+                        }
+                    });
+
+                    const data = await response.json();
+
+                    if (data.success) {
+                        this.messages.cache = data.message;
+                        this.messages.cacheSuccess = true;
+                    } else {
+                        this.messages.cache = data.message || 'An error occurred';
+                        this.messages.cacheSuccess = false;
+                    }
+                } catch (error) {
+                    this.messages.cache = error.message;
+                    this.messages.cacheSuccess = false;
+                } finally {
+                    this.loading.cache = false;
+                    setTimeout(() => {
+                        this.messages.cache = '';
+                    }, 5000);
+                }
+            }
+        };
+    }
+    </script>
+</x-buildora-layout>
diff --git a/routes/buildora.php b/routes/buildora.php
index 1e63d28..744eb7c 100644
--- a/routes/buildora.php
+++ b/routes/buildora.php
@@ -12,6 +12,7 @@
 use Ginkelsoft\Buildora\Http\Controllers\PermissionSyncController;
 use Ginkelsoft\Buildora\Http\Controllers\ProfileController;
 use Ginkelsoft\Buildora\Http\Controllers\TwoFactorController;
+use Ginkelsoft\Buildora\Http\Controllers\BuildoraSettingsController;
 
 Route::prefix(config('buildora.route_prefix', 'buildora'))
     ->middleware(config('buildora.middleware', ['web', 'buildora.auth', 'buildora.ensure-user-resource']))
@@ -42,7 +43,24 @@
 
         /*
         |--------------------------------------------------------------------------
-        | Permission Management
+        | Settings
+        |--------------------------------------------------------------------------
+        */
+        Route::get('/settings', [BuildoraSettingsController::class, 'index'])
+            ->name('buildora.settings')
+            ->middleware(['web', 'auth']);
+
+        Route::post('/settings/sync-permissions', [BuildoraSettingsController::class, 'syncPermissions'])
+            ->name('buildora.settings.sync-permissions')
+            ->middleware(['web', 'auth']);
+
+        Route::post('/settings/clear-cache', [BuildoraSettingsController::class, 'clearCache'])
+            ->name('buildora.settings.clear-cache')
+            ->middleware(['web', 'auth']);
+
+        /*
+        |--------------------------------------------------------------------------
+        | Permission Management (Legacy)
         |--------------------------------------------------------------------------
         */
         Route::post('/permissions/sync', [PermissionSyncController::class, 'sync'])
diff --git a/src/Http/Controllers/BuildoraSettingsController.php b/src/Http/Controllers/BuildoraSettingsController.php
new file mode 100644
index 0000000..ac4a979
--- /dev/null
+++ b/src/Http/Controllers/BuildoraSettingsController.php
@@ -0,0 +1,131 @@
+<?php
+
+namespace Ginkelsoft\Buildora\Http\Controllers;
+
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\Artisan;
+use Illuminate\Support\Facades\Cache;
+use Spatie\Permission\Models\Permission;
+
+class BuildoraSettingsController extends Controller
+{
+    /**
+     * Show the settings page.
+     */
+    public function index()
+    {
+        $stats = $this->getSystemStats();
+
+        return view('buildora::settings.index', [
+            'stats' => $stats,
+        ]);
+    }
+
+    /**
+     * Sync permissions via AJAX.
+     */
+    public function syncPermissions(Request $request): JsonResponse
+    {
+        try {
+            // Run the sync permissions command
+            Artisan::call('buildora:sync-permissions');
+            $output = Artisan::output();
+
+            // Get updated permission count
+            $permissionCount = Permission::count();
+
+            return response()->json([
+                'success' => true,
+                'message' => __buildora('Permissions synchronized successfully.'),
+                'output' => $output,
+                'permission_count' => $permissionCount,
+            ]);
+        } catch (\Exception $e) {
+            return response()->json([
+                'success' => false,
+                'message' => $e->getMessage(),
+            ], 500);
+        }
+    }
+
+    /**
+     * Clear application cache.
+     */
+    public function clearCache(Request $request): JsonResponse
+    {
+        try {
+            Artisan::call('cache:clear');
+            Artisan::call('config:clear');
+            Artisan::call('view:clear');
+            Artisan::call('route:clear');
+
+            return response()->json([
+                'success' => true,
+                'message' => __buildora('Cache cleared successfully.'),
+            ]);
+        } catch (\Exception $e) {
+            return response()->json([
+                'success' => false,
+                'message' => $e->getMessage(),
+            ], 500);
+        }
+    }
+
+    /**
+     * Get system information.
+     */
+    public function systemInfo(Request $request): JsonResponse
+    {
+        return response()->json([
+            'success' => true,
+            'data' => $this->getSystemStats(),
+        ]);
+    }
+
+    /**
+     * Get system statistics.
+     */
+    protected function getSystemStats(): array
+    {
+        $permissionCount = 0;
+        $userCount = 0;
+        $resourceCount = 0;
+
+        try {
+            $permissionCount = Permission::count();
+        } catch (\Exception $e) {
+            // Permission table might not exist
+        }
+
+        try {
+            $userModel = config('auth.providers.users.model', 'App\\Models\\User');
+            if (class_exists($userModel)) {
+                $userCount = $userModel::count();
+            }
+        } catch (\Exception $e) {
+            // User table might not exist
+        }
+
+        // Count Buildora resources
+        $resourcePath = app_path('Buildora/Resources');
+        if (is_dir($resourcePath)) {
+            $resourceCount = count(glob($resourcePath . '/*Buildora.php'));
+        }
+
+        return [
+            'php_version' => PHP_VERSION,
+            'laravel_version' => app()->version(),
+            'buildora_version' => config('buildora.version', 'dev'),
+            'environment' => app()->environment(),
+            'debug_mode' => config('app.debug'),
+            'permission_count' => $permissionCount,
+            'user_count' => $userCount,
+            'resource_count' => $resourceCount,
+            'cache_driver' => config('cache.default'),
+            'session_driver' => config('session.driver'),
+            'queue_driver' => config('queue.default'),
+        ];
+    }
+}
diff --git a/src/Providers/BuildoraServiceProvider.php b/src/Providers/BuildoraServiceProvider.php
index c419e90..745a134 100644
--- a/src/Providers/BuildoraServiceProvider.php
+++ b/src/Providers/BuildoraServiceProvider.php
@@ -64,6 +64,16 @@ public function boot(): void
             __DIR__ . '/../../config/buildora.php' => config_path('buildora.php'),
         ], 'buildora-config');
 
+        // Publish LaRecipe configuration
+        $this->publishes([
+            __DIR__ . '/../../config/larecipe.php' => config_path('larecipe.php'),
+        ], 'buildora-docs-config');
+
+        // Publish documentation files
+        $this->publishes([
+            __DIR__ . '/../../resources/docs' => resource_path('docs'),
+        ], 'buildora-docs');
+
         // Publish migrations
         $this->publishes([
             __DIR__ . '/../../database/migrations' => database_path('migrations'),

From 1272c9dbddc6ff8ab27f8efb967600a129a8f1da Mon Sep 17 00:00:00 2001
From: Wietse van Ginkel <info@ginkelsoft.com>
Date: Thu, 4 Dec 2025 13:18:02 +0100
Subject: [PATCH 4/8] inline relation modal buildora settings page docs

---
 .../Controllers/BuildoraSettingsController.php | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/Http/Controllers/BuildoraSettingsController.php b/src/Http/Controllers/BuildoraSettingsController.php
index ac4a979..a3135e1 100644
--- a/src/Http/Controllers/BuildoraSettingsController.php
+++ b/src/Http/Controllers/BuildoraSettingsController.php
@@ -16,7 +16,23 @@ class BuildoraSettingsController extends Controller
      */
     public function index()
     {
-        $stats = $this->getSystemStats();
+        try {
+            $stats = $this->getSystemStats();
+        } catch (\Exception $e) {
+            $stats = [
+                'php_version' => PHP_VERSION,
+                'laravel_version' => app()->version(),
+                'buildora_version' => config('buildora.version', 'dev'),
+                'environment' => app()->environment(),
+                'debug_mode' => config('app.debug'),
+                'permission_count' => 0,
+                'user_count' => 0,
+                'resource_count' => 0,
+                'cache_driver' => config('cache.default'),
+                'session_driver' => config('session.driver'),
+                'queue_driver' => config('queue.default'),
+            ];
+        }
 
         return view('buildora::settings.index', [
             'stats' => $stats,

From 1fc26c9dd63113c942450c160ed35f496ac60317 Mon Sep 17 00:00:00 2001
From: Wietse van Ginkel <info@ginkelsoft.com>
Date: Thu, 4 Dec 2025 14:24:35 +0100
Subject: [PATCH 5/8] inline relation modal buildora settings page docs

---
 README.md                                |  37 +++-
 config/buildora.php                      |  18 +-
 config/larecipe.php                      |   2 +-
 resources/docs/1.0/fields.md             |  31 ++++
 resources/views/settings/index.blade.php |  38 +++--
 routes/buildora.php                      |  11 ++
 src/Fields/Types/RelationLinkField.php   | 205 +++++++++++++++++++++++
 src/Support/NavigationBuilder.php        |   4 +
 8 files changed, 320 insertions(+), 26 deletions(-)
 create mode 100644 src/Fields/Types/RelationLinkField.php

diff --git a/README.md b/README.md
index c355e3d..02c1346 100644
--- a/README.md
+++ b/README.md
@@ -325,6 +325,29 @@ The main configuration file `config/buildora.php` contains:
 ### Navigation Structure
 ```php
 'navigation' => [
+    // Link to a Buildora resource
+    [
+        'label' => 'Users',
+        'icon' => 'fas fa-user',
+        'route' => 'buildora.index',
+        'params' => ['resource' => 'user'],
+    ],
+
+    // Link to an external URL
+    [
+        'label' => 'Documentation',
+        'icon' => 'fas fa-book',
+        'url' => 'https://docs.example.com',
+    ],
+
+    // Link to a custom Laravel route
+    [
+        'label' => 'Back to site',
+        'icon' => 'fas fa-home',
+        'url' => '/',
+    ],
+
+    // Nested navigation with children
     [
         'label' => 'Settings',
         'icon' => 'fas fa-cog',
@@ -335,12 +358,24 @@ The main configuration file `config/buildora.php` contains:
                 'route' => 'buildora.index',
                 'params' => ['resource' => 'user'],
             ],
+            [
+                'label' => 'Permissions',
+                'icon' => 'fas fa-lock',
+                'route' => 'buildora.index',
+                'params' => ['resource' => 'permission'],
+            ],
         ],
     ],
-    'include_resources' => true, // Auto-include all resources
+
+    'include_resources' => true, // Auto-include all resources not manually defined
 ],
 ```
 
+Navigation items support:
+- `route` + `params`: Link to a named Laravel route
+- `url`: Direct URL (internal or external)
+- `children`: Nested dropdown menu
+
 ---
 
 ## 14. All Available Commands
diff --git a/config/buildora.php b/config/buildora.php
index 956d711..cd99fc2 100644
--- a/config/buildora.php
+++ b/config/buildora.php
@@ -105,12 +105,6 @@
             'label' => 'Settings',
             'icon' => 'fas fa-cog',
             'children' => [
-                [
-                    'label' => 'Buildora',
-                    'icon' => 'fas fa-sliders-h',
-                    'route' => 'buildora.settings',
-                    'params' => []
-                ],
                 [
                     'label' => 'Users',
                     'icon' => 'fas fa-user',
@@ -131,6 +125,18 @@
         ],
 
         'include_resources' => true,
+
+        [
+            'label' => 'Buildora',
+            'icon' => 'fas fa-cog',
+            'children' => [
+                [
+                    'label' => 'Settings',
+                    'icon' => 'fas fa-sliders',
+                    'route' => 'buildora.settings',
+                ],
+            ],
+        ],
     ],
 
     /*
diff --git a/config/larecipe.php b/config/larecipe.php
index 30f42ba..37565d2 100644
--- a/config/larecipe.php
+++ b/config/larecipe.php
@@ -11,7 +11,7 @@
     */
 
     'docs' => [
-        'route' => '/docs',
+        'route' => '/buildora/docs',
         'path' => '/resources/docs',
         'landing' => 'index',
         'middleware' => ['web'],
diff --git a/resources/docs/1.0/fields.md b/resources/docs/1.0/fields.md
index ae8bcc3..8e9a1ae 100644
--- a/resources/docs/1.0/fields.md
+++ b/resources/docs/1.0/fields.md
@@ -276,6 +276,37 @@ BelongsToManyField::make('tags')
     ->hideFromTable();
 ```
 
+### RelationLinkField
+
+Displays a clickable link to a related record.
+
+```php
+use Ginkelsoft\Buildora\Fields\Types\RelationLinkField;
+
+// Basic usage - link to related record
+RelationLinkField::make('category', 'Category')
+    ->displayUsing('name');
+
+// With explicit model and resource
+RelationLinkField::make('author', 'Author')
+    ->relatedTo(\App\Models\User::class)
+    ->resource(\App\Buildora\Resources\UserBuildora::class)
+    ->displayUsing('name');
+
+// Open in new tab
+RelationLinkField::make('company')
+    ->displayUsing('company_name')
+    ->openInNewTab();
+```
+
+**Methods:**
+- `relatedTo(string $model)` - Set the related model class
+- `resource(string $resourceClass)` - Set the Buildora resource for URL generation
+- `displayUsing(string $column)` - Column to display as link text (default: 'name')
+- `openInNewTab(bool $value)` - Open the link in a new browser tab
+
+> {info} RelationLinkField automatically hides from create/edit forms. It's designed for table and detail views only.
+
 ---
 
 <a name="content-fields"></a>
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index 57b311b..f744f97 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -1,4 +1,6 @@
-<x-buildora-layout>
+@extends('buildora::layouts.buildora')
+
+@section('content')
     <div class="max-w-6xl mx-auto" x-data="buildoraSettings()">
         {{-- Header --}}
         <div class="mb-8">
@@ -28,7 +30,7 @@
                         </div>
                         <span class="px-3 py-1 text-sm font-medium rounded-full"
                               style="background: rgba(102, 126, 234, 0.1); color: var(--accent-color);">
-                            <span x-text="stats.permission_count">{{ $stats['permission_count'] }}</span> {{ __buildora('permissions') }}
+                            <span x-text="stats.permission_count">{{ $stats['permission_count'] ?? 0 }}</span> {{ __buildora('permissions') }}
                         </span>
                     </div>
 
@@ -74,15 +76,15 @@ class="text-sm"
                         <div class="grid grid-cols-3 gap-4 text-sm">
                             <div>
                                 <span style="color: var(--text-muted);">{{ __buildora('Cache Driver') }}</span>
-                                <p class="font-medium" style="color: var(--text-primary);">{{ $stats['cache_driver'] }}</p>
+                                <p class="font-medium" style="color: var(--text-primary);">{{ $stats['cache_driver'] ?? 'file' }}</p>
                             </div>
                             <div>
                                 <span style="color: var(--text-muted);">{{ __buildora('Session Driver') }}</span>
-                                <p class="font-medium" style="color: var(--text-primary);">{{ $stats['session_driver'] }}</p>
+                                <p class="font-medium" style="color: var(--text-primary);">{{ $stats['session_driver'] ?? 'file' }}</p>
                             </div>
                             <div>
                                 <span style="color: var(--text-muted);">{{ __buildora('Queue Driver') }}</span>
-                                <p class="font-medium" style="color: var(--text-primary);">{{ $stats['queue_driver'] }}</p>
+                                <p class="font-medium" style="color: var(--text-primary);">{{ $stats['queue_driver'] ?? 'sync' }}</p>
                             </div>
                         </div>
                     </div>
@@ -119,7 +121,7 @@ class="text-sm"
                     <div class="mt-4 p-4 rounded-xl" style="background: var(--bg-primary);">
                         <div class="flex items-center justify-between">
                             <span style="color: var(--text-secondary);">{{ __buildora('Total Resources') }}</span>
-                            <span class="text-xl font-bold" style="color: var(--text-primary);">{{ $stats['resource_count'] }}</span>
+                            <span class="text-xl font-bold" style="color: var(--text-primary);">{{ $stats['resource_count'] ?? 0 }}</span>
                         </div>
                     </div>
 
@@ -147,32 +149,32 @@ class="text-sm"
                     <div class="space-y-4">
                         <div class="flex items-center justify-between py-2" style="border-bottom: 1px solid var(--border-color);">
                             <span class="text-sm" style="color: var(--text-muted);">{{ __buildora('PHP Version') }}</span>
-                            <span class="text-sm font-medium" style="color: var(--text-primary);">{{ $stats['php_version'] }}</span>
+                            <span class="text-sm font-medium" style="color: var(--text-primary);">{{ $stats['php_version'] ?? PHP_VERSION }}</span>
                         </div>
 
                         <div class="flex items-center justify-between py-2" style="border-bottom: 1px solid var(--border-color);">
                             <span class="text-sm" style="color: var(--text-muted);">{{ __buildora('Laravel Version') }}</span>
-                            <span class="text-sm font-medium" style="color: var(--text-primary);">{{ $stats['laravel_version'] }}</span>
+                            <span class="text-sm font-medium" style="color: var(--text-primary);">{{ $stats['laravel_version'] ?? app()->version() }}</span>
                         </div>
 
                         <div class="flex items-center justify-between py-2" style="border-bottom: 1px solid var(--border-color);">
                             <span class="text-sm" style="color: var(--text-muted);">{{ __buildora('Buildora Version') }}</span>
-                            <span class="text-sm font-medium" style="color: var(--accent-color);">{{ $stats['buildora_version'] }}</span>
+                            <span class="text-sm font-medium" style="color: var(--accent-color);">{{ $stats['buildora_version'] ?? config('buildora.version', 'dev') }}</span>
                         </div>
 
                         <div class="flex items-center justify-between py-2" style="border-bottom: 1px solid var(--border-color);">
                             <span class="text-sm" style="color: var(--text-muted);">{{ __buildora('Environment') }}</span>
                             <span class="px-2 py-0.5 text-xs font-medium rounded-full"
-                                  style="background: {{ $stats['environment'] === 'production' ? '#10b981' : '#f59e0b' }}20; color: {{ $stats['environment'] === 'production' ? '#10b981' : '#f59e0b' }};">
-                                {{ $stats['environment'] }}
+                                  style="background: {{ ($stats['environment'] ?? app()->environment()) === 'production' ? '#10b981' : '#f59e0b' }}20; color: {{ ($stats['environment'] ?? app()->environment()) === 'production' ? '#10b981' : '#f59e0b' }};">
+                                {{ $stats['environment'] ?? app()->environment() }}
                             </span>
                         </div>
 
                         <div class="flex items-center justify-between py-2">
                             <span class="text-sm" style="color: var(--text-muted);">{{ __buildora('Debug Mode') }}</span>
                             <span class="px-2 py-0.5 text-xs font-medium rounded-full"
-                                  style="background: {{ $stats['debug_mode'] ? '#ef4444' : '#10b981' }}20; color: {{ $stats['debug_mode'] ? '#ef4444' : '#10b981' }};">
-                                {{ $stats['debug_mode'] ? 'ON' : 'OFF' }}
+                                  style="background: {{ ($stats['debug_mode'] ?? config('app.debug')) ? '#ef4444' : '#10b981' }}20; color: {{ ($stats['debug_mode'] ?? config('app.debug')) ? '#ef4444' : '#10b981' }};">
+                                {{ ($stats['debug_mode'] ?? config('app.debug')) ? 'ON' : 'OFF' }}
                             </span>
                         </div>
                     </div>
@@ -192,7 +194,7 @@ class="text-sm"
                                     <i class="fas fa-users" style="color: var(--accent-color);"></i>
                                 </div>
                                 <div>
-                                    <p class="text-2xl font-bold" style="color: var(--text-primary);">{{ $stats['user_count'] }}</p>
+                                    <p class="text-2xl font-bold" style="color: var(--text-primary);">{{ $stats['user_count'] ?? 0 }}</p>
                                     <p class="text-xs" style="color: var(--text-muted);">{{ __buildora('Users') }}</p>
                                 </div>
                             </div>
@@ -204,7 +206,7 @@ class="text-sm"
                                     <i class="fas fa-cubes" style="color: #10b981;"></i>
                                 </div>
                                 <div>
-                                    <p class="text-2xl font-bold" style="color: var(--text-primary);">{{ $stats['resource_count'] }}</p>
+                                    <p class="text-2xl font-bold" style="color: var(--text-primary);">{{ $stats['resource_count'] ?? 0 }}</p>
                                     <p class="text-xs" style="color: var(--text-muted);">{{ __buildora('Resources') }}</p>
                                 </div>
                             </div>
@@ -216,7 +218,7 @@ class="text-sm"
                                     <i class="fas fa-shield-alt" style="color: #f59e0b;"></i>
                                 </div>
                                 <div>
-                                    <p class="text-2xl font-bold" style="color: var(--text-primary);" x-text="stats.permission_count">{{ $stats['permission_count'] }}</p>
+                                    <p class="text-2xl font-bold" style="color: var(--text-primary);" x-text="stats.permission_count">{{ $stats['permission_count'] ?? 0 }}</p>
                                     <p class="text-xs" style="color: var(--text-muted);">{{ __buildora('Permissions') }}</p>
                                 </div>
                             </div>
@@ -247,7 +249,7 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 te
     function buildoraSettings() {
         return {
             stats: {
-                permission_count: {{ $stats['permission_count'] }}
+                permission_count: {{ $stats['permission_count'] ?? 0 }}
             },
             loading: {
                 permissions: false,
@@ -331,4 +333,4 @@ function buildoraSettings() {
         };
     }
     </script>
-</x-buildora-layout>
+@endsection
diff --git a/routes/buildora.php b/routes/buildora.php
index 744eb7c..db1cfff 100644
--- a/routes/buildora.php
+++ b/routes/buildora.php
@@ -58,6 +58,17 @@
             ->name('buildora.settings.clear-cache')
             ->middleware(['web', 'auth']);
 
+        /*
+        |--------------------------------------------------------------------------
+        | Documentation
+        |--------------------------------------------------------------------------
+        */
+        Route::get('/docs/{version?}/{page?}', function ($version = null, $page = null) {
+            $version = $version ?? config('larecipe.versions.default', '1.0');
+            $page = $page ?? config('larecipe.docs.landing', 'index');
+            return redirect("/buildora/docs/{$version}/{$page}");
+        })->name('buildora.docs')->where('page', '.*');
+
         /*
         |--------------------------------------------------------------------------
         | Permission Management (Legacy)
diff --git a/src/Fields/Types/RelationLinkField.php b/src/Fields/Types/RelationLinkField.php
new file mode 100644
index 0000000..8f3d030
--- /dev/null
+++ b/src/Fields/Types/RelationLinkField.php
@@ -0,0 +1,205 @@
+<?php
+
+namespace Ginkelsoft\Buildora\Fields\Types;
+
+use Ginkelsoft\Buildora\Fields\Field;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasOne;
+use Illuminate\Support\Str;
+
+/**
+ * Class RelationLinkField
+ *
+ * Displays a clickable link to a related record in the datatable.
+ * Useful for showing relations as navigable links instead of plain text.
+ */
+class RelationLinkField extends Field
+{
+    protected ?string $relatedModel = null;
+    protected ?string $relatedResource = null;
+    protected string $displayColumn = 'name';
+    protected ?string $linkRoute = null;
+    protected ?Model $parentModel = null;
+    protected bool $openInNewTab = false;
+
+    /**
+     * RelationLinkField constructor.
+     */
+    public function __construct(string $name, ?string $label = null)
+    {
+        parent::__construct($name, $label ?? ucfirst($name), 'relationLink');
+
+        // Default: hide from forms, show only in table/detail
+        $this->hideFromCreate();
+        $this->hideFromEdit();
+    }
+
+    /**
+     * Factory method to create a new RelationLinkField instance.
+     */
+    public static function make(string $name, ?string $label = null): self
+    {
+        return new self($name, $label);
+    }
+
+    /**
+     * Set the related model class.
+     */
+    public function relatedTo(string $model): self
+    {
+        $this->relatedModel = $model;
+        return $this;
+    }
+
+    /**
+     * Set the related Buildora resource class for generating the link.
+     */
+    public function resource(string $resourceClass): self
+    {
+        $this->relatedResource = $resourceClass;
+        return $this;
+    }
+
+    /**
+     * Set the column to display as link text.
+     */
+    public function displayUsing(string $column): self
+    {
+        $this->displayColumn = $column;
+        return $this;
+    }
+
+    /**
+     * Set a custom route for the link.
+     */
+    public function route(string $routeName): self
+    {
+        $this->linkRoute = $routeName;
+        return $this;
+    }
+
+    /**
+     * Open link in new tab.
+     */
+    public function openInNewTab(bool $value = true): self
+    {
+        $this->openInNewTab = $value;
+        return $this;
+    }
+
+    /**
+     * Set the parent model for relation inference.
+     */
+    public function setParentModel(Model $parentModel): self
+    {
+        $this->parentModel = $parentModel;
+        return $this;
+    }
+
+    /**
+     * Get the related model class name.
+     */
+    public function getRelatedModel(): ?string
+    {
+        if ($this->relatedModel) {
+            return $this->relatedModel;
+        }
+
+        if ($this->parentModel && method_exists($this->parentModel, $this->name)) {
+            $relation = $this->parentModel->{$this->name}();
+            return get_class($relation->getRelated());
+        }
+
+        return null;
+    }
+
+    /**
+     * Get the resource slug for URL generation.
+     */
+    protected function getResourceSlug(): ?string
+    {
+        if ($this->relatedResource) {
+            // Extract slug from resource class name
+            $className = class_basename($this->relatedResource);
+            return Str::kebab(str_replace('Buildora', '', $className));
+        }
+
+        // Try to derive from related model
+        $relatedModel = $this->getRelatedModel();
+        if ($relatedModel) {
+            return Str::kebab(class_basename($relatedModel));
+        }
+
+        return null;
+    }
+
+    /**
+     * Set the field value from a model instance.
+     */
+    public function setValue(mixed $model): self
+    {
+        if (!$model instanceof Model) {
+            $this->value = null;
+            $this->displayValue = '-';
+            return $this;
+        }
+
+        if (!method_exists($model, $this->name)) {
+            $this->value = null;
+            $this->displayValue = '-';
+            return $this;
+        }
+
+        $relation = $model->{$this->name}();
+
+        if (!($relation instanceof BelongsTo || $relation instanceof HasOne)) {
+            $this->value = null;
+            $this->displayValue = '-';
+            return $this;
+        }
+
+        $relatedInstance = $relation->getResults();
+
+        if (!$relatedInstance) {
+            $this->value = null;
+            $this->displayValue = '-';
+            return $this;
+        }
+
+        $this->value = $relatedInstance->getKey();
+        $displayText = $relatedInstance->{$this->displayColumn} ?? $relatedInstance->getKey();
+
+        // Generate the link
+        $resourceSlug = $this->getResourceSlug();
+        $routeName = $this->linkRoute ?? 'buildora.show';
+
+        if ($resourceSlug && \Route::has($routeName)) {
+            $url = route($routeName, [
+                'resource' => $resourceSlug,
+                'id' => $relatedInstance->getKey(),
+            ]);
+
+            $target = $this->openInNewTab ? ' target="_blank"' : '';
+            $this->displayValue = sprintf(
+                '<a href="%s" class="text-indigo-600 hover:text-indigo-800 hover:underline"%s>%s</a>',
+                $url,
+                $target,
+                e($displayText)
+            );
+        } else {
+            $this->displayValue = e($displayText);
+        }
+
+        return $this;
+    }
+
+    /**
+     * Get the display value for tables/views.
+     */
+    public function getDisplayValue(mixed $model): string
+    {
+        $this->setValue($model);
+        return $this->displayValue ?? '-';
+    }
+}
diff --git a/src/Support/NavigationBuilder.php b/src/Support/NavigationBuilder.php
index a85dd44..bce7467 100644
--- a/src/Support/NavigationBuilder.php
+++ b/src/Support/NavigationBuilder.php
@@ -171,6 +171,10 @@ public static function getNavigation(): array
      */
     public static function getNavigationItemUrl(array $item): ?string
     {
+        if (isset($item['url'])) {
+            return $item['url'];
+        }
+
         if (!isset($item['route']) || !Route::has($item['route'])) {
             return null;
         }

From e587e5694008ea3b2bd95185a45479ebe82e4f81 Mon Sep 17 00:00:00 2001
From: Wietse van Ginkel <info@ginkelsoft.com>
Date: Thu, 4 Dec 2025 14:34:57 +0100
Subject: [PATCH 6/8] inline relation modal buildora settings page docs

---
 src/Fields/Types/RelationLinkField.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Fields/Types/RelationLinkField.php b/src/Fields/Types/RelationLinkField.php
index 8f3d030..ac19d5d 100644
--- a/src/Fields/Types/RelationLinkField.php
+++ b/src/Fields/Types/RelationLinkField.php
@@ -38,7 +38,7 @@ public function __construct(string $name, ?string $label = null)
     /**
      * Factory method to create a new RelationLinkField instance.
      */
-    public static function make(string $name, ?string $label = null): self
+    public static function make(string $name, ?string $label = null, string $type = 'relationLink'): self
     {
         return new self($name, $label);
     }

From 673761c5fda0efb75b1ed94f1c178ffaab6c7fdb Mon Sep 17 00:00:00 2001
From: Wietse van Ginkel <info@ginkelsoft.com>
Date: Thu, 4 Dec 2025 16:01:50 +0100
Subject: [PATCH 7/8] inline relation modal buildora settings page docs

---
 src/Fields/Field.php                   |  1 +
 src/Fields/Types/RelationLinkField.php | 29 ++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/Fields/Field.php b/src/Fields/Field.php
index 949e51e..bf14131 100644
--- a/src/Fields/Field.php
+++ b/src/Fields/Field.php
@@ -26,6 +26,7 @@ class Field
     public bool $readonly = false;
     public mixed $displayValue = null;
     public mixed $value = null;
+    public string $align = 'left';
 
     protected ?string $helpText = null;
 
diff --git a/src/Fields/Types/RelationLinkField.php b/src/Fields/Types/RelationLinkField.php
index ac19d5d..30b30b5 100644
--- a/src/Fields/Types/RelationLinkField.php
+++ b/src/Fields/Types/RelationLinkField.php
@@ -22,6 +22,7 @@ class RelationLinkField extends Field
     protected ?string $linkRoute = null;
     protected ?Model $parentModel = null;
     protected bool $openInNewTab = false;
+    protected ?string $icon = null;
 
     /**
      * RelationLinkField constructor.
@@ -37,10 +38,15 @@ public function __construct(string $name, ?string $label = null)
 
     /**
      * Factory method to create a new RelationLinkField instance.
+     *
+     * @param string $name
+     * @param string|null $label
+     * @param string $type
+     * @return static
      */
-    public static function make(string $name, ?string $label = null, string $type = 'relationLink'): self
+    public static function make(string $name, ?string $label = null, string $type = 'relationLink'): static
     {
-        return new self($name, $label);
+        return new static($name, $label);
     }
 
     /**
@@ -88,6 +94,18 @@ public function openInNewTab(bool $value = true): self
         return $this;
     }
 
+    /**
+     * Set an icon to display before the link text.
+     *
+     * @param string $iconClass Font Awesome or other icon class (e.g., 'fas fa-user')
+     * @return self
+     */
+    public function icon(string $iconClass): self
+    {
+        $this->icon = $iconClass;
+        return $this;
+    }
+
     /**
      * Set the parent model for relation inference.
      */
@@ -181,14 +199,17 @@ public function setValue(mixed $model): self
             ]);
 
             $target = $this->openInNewTab ? ' target="_blank"' : '';
+            $iconHtml = $this->icon ? sprintf('<i class="%s mr-1"></i>', e($this->icon)) : '';
             $this->displayValue = sprintf(
-                '<a href="%s" class="text-indigo-600 hover:text-indigo-800 hover:underline"%s>%s</a>',
+                '<a href="%s" class="text-indigo-600 hover:text-indigo-800 hover:underline inline-flex items-center"%s>%s%s <i class="fas fa-arrow-up-right-from-square ml-2 text-xs opacity-60"></i></a>',
                 $url,
                 $target,
+                $iconHtml,
                 e($displayText)
             );
         } else {
-            $this->displayValue = e($displayText);
+            $iconHtml = $this->icon ? sprintf('<i class="%s mr-1"></i>', e($this->icon)) : '';
+            $this->displayValue = $iconHtml . e($displayText);
         }
 
         return $this;

From 6e67e61bf3c8146bed2fec290c39a8d35ec5de57 Mon Sep 17 00:00:00 2001
From: Wietse van Ginkel <info@ginkelsoft.com>
Date: Fri, 5 Dec 2025 08:01:57 +0100
Subject: [PATCH 8/8] add relation link view

---
 resources/views/components/input/relationLink.blade.php | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 resources/views/components/input/relationLink.blade.php

diff --git a/resources/views/components/input/relationLink.blade.php b/resources/views/components/input/relationLink.blade.php
new file mode 100644
index 0000000..f8d67d4
--- /dev/null
+++ b/resources/views/components/input/relationLink.blade.php
@@ -0,0 +1,9 @@
+{{-- RelationLinkField is display-only and should not appear in forms --}}
+{{-- This component is a fallback in case visibility settings are overridden --}}
+@if(isset($field) && isset($model))
+    <div class="p-3 rounded-lg" style="background: var(--bg-muted); border: 1px solid var(--border-color);">
+        <span style="color: var(--text-primary);">
+            {!! $field->getDisplayValue($model) !!}
+        </span>
+    </div>
+@endif