solidcrud 0.1.0

data/app/views/solidcrud/admin/model.html.erb

@@ -0,0 +1,353 @@
+<div class="flex h-screen bg-gradient-to-br from-slate-50 to-slate-100">
+  <!-- Sidebar -->
+  <div class="w-80 bg-white border-r border-slate-200/50 flex flex-col" data-controller="navigation">
+    <!-- Logo Section -->
+    <div class="p-6 border-b border-slate-200/50">
+      <div class="flex items-center space-x-3">
+        <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+          <span class="text-white">🧊</span>
+        </div>
+        <div>
+          <h2 class="text-lg font-bold text-slate-900">SolidCRUD</h2>
+          <p class="text-xs text-slate-500">Admin Panel</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation Menu -->
+    <nav class="flex-1 p-4">
+      <div class="space-y-1">
+        <a href="<%= solidcrud.root_path %>"
+           class="nav-item flex items-center space-x-3 px-4 py-3 text-slate-700 hover:bg-slate-100 rounded-xl transition-all duration-200 group"
+           data-path="/admin"
+           data-action="navigation#handleNavClick">
+          <div class="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center group-hover:bg-blue-100 transition-colors duration-200">
+            <span class="text-slate-500 group-hover:text-blue-600">📊</span>
+          </div>
+          <span class="font-medium">Dashboard</span>
+        </a>
+
+        <div class="pt-4">
+          <h3 class="px-4 text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Models</h3>
+          <div class="space-y-1">
+            <% @models.each do |model| %>
+              <a href="<%= solidcrud.admin_model_path(model.name) %>"
+                 class="nav-item flex items-center space-x-3 px-4 py-3 text-slate-700 hover:bg-slate-100 rounded-xl transition-all duration-200 group"
+                 data-path="/admin/<%= model.name %>"
+                 data-action="navigation#handleNavClick">
+                <div class="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center group-hover:bg-blue-100 transition-colors duration-200">
+                  <span class="text-slate-500 group-hover:text-blue-600">📋</span>
+                </div>
+                <div class="flex-1 min-w-0">
+                  <div class="font-medium truncate"><%= model.name.pluralize %></div>
+                  <div class="text-xs text-slate-500"><%= model.count %> records</div>
+                </div>
+              </a>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Footer -->
+    <div class="p-4 border-t border-slate-200/50">
+      <div class="text-xs text-slate-500 text-center">
+        Rails <%= Rails.version %> • SolidCRUD
+      </div>
+    </div>
+  </div>
+
+  <!-- Main Content Area -->
+  <div class="flex-1 flex flex-col overflow-hidden">
+    <!-- Content Header with Flash Messages -->
+    <div class="bg-white border-b border-slate-200/50 px-8 py-6">
+      <!-- Flash Messages -->
+      <div id="flash-messages">
+      <% if flash[:notice] %>
+        <div class="mb-6 bg-green-50 border border-green-200 rounded-xl p-4 flex items-start space-x-3 animate-in slide-in-from-top-2 duration-300">
+          <div class="flex-shrink-0">
+            <span class="text-green-500 text-lg">✓</span>
+          </div>
+          <div class="flex-1">
+            <p class="text-green-800 font-medium"><%= flash[:notice] %></p>
+          </div>
+          <button class="flex-shrink-0 text-green-400 hover:text-green-600 transition-colors duration-200">
+            <span class="text-lg">×</span>
+          </button>
+        </div>
+      <% end %>
+
+      <% if flash[:alert] %>
+        <div class="mb-6 bg-red-50 border border-red-200 rounded-xl p-4 flex items-start space-x-3 animate-in slide-in-from-top-2 duration-300">
+          <div class="flex-shrink-0">
+            <span class="text-red-500 text-lg">⚠️</span>
+          </div>
+          <div class="flex-1">
+            <p class="text-red-800 font-medium"><%= flash[:alert] %></p>
+          </div>
+          <button class="flex-shrink-0 text-red-400 hover:text-red-600 transition-colors duration-200">
+            <span class="text-lg">×</span>
+          </button>
+        </div>
+      <% end %>
+      </div>
+    </div>
+
+    <!-- Scrollable Content -->
+    <div class="flex-1 overflow-y-auto">
+      <div class="px-8 py-6">
+        <!-- Header Section -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8">
+          <div class="mb-4 sm:mb-0">
+            <!-- Breadcrumb -->
+            <nav class="flex items-center space-x-2 text-sm text-slate-500 mb-2">
+              <a href="<%= solidcrud.root_path %>" class="hover:text-slate-700 transition-colors duration-200">
+                <span class="mr-1">🏠</span>Dashboard
+              </a>
+              <span class="text-slate-400">›</span>
+              <span class="text-slate-900 font-medium"><%= @model_name.pluralize %></span>
+            </nav>
+
+            <div class="flex items-center space-x-4">
+              <div class="w-12 h-12 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
+                <span class="text-white text-lg">📋</span>
+              </div>
+              <div>
+                <h1 class="text-3xl font-bold text-slate-900"><%= @model_name.pluralize %></h1>
+                <p class="text-slate-600 mt-1">Manage your <%= @model_name.downcase %> records</p>
+              </div>
+            </div>
+          </div>
+
+          <%= link_to solidcrud.new_admin_model_path(@model_name),
+              class: "inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105" do %>
+            <span class="mr-2">+</span>New <%= @model_name %>
+          <% end %>
+        </div>
+
+<!-- Search and Filter Section -->
+<div class="bg-white rounded-2xl shadow-sm border border-slate-200/50 p-6 mb-6" data-controller="search">
+  <%= form_with url: solidcrud.admin_model_path(@model_name), method: :get, local: true,
+      class: 'grid grid-cols-1 md:grid-cols-4 gap-4',
+      data: { turbo_frame: "_top" } do |f| %>
+
+    <div class="md:col-span-2">
+      <label class="block text-sm font-medium text-slate-700 mb-2">
+        <span class="mr-2 text-slate-400">🔍</span>Search
+      </label>
+      <div class="relative">
+        <%= f.text_field :search,
+            value: params[:search],
+            placeholder: "Search #{ @model_name.pluralize.downcase }...",
+            class: 'w-full pl-4 pr-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-slate-50 focus:bg-white',
+            data: { search_target: "input", action: "input->search#handleInput" } %>
+        <button type="button"
+                class="absolute right-3 top-3 text-slate-400 hover:text-slate-600 hidden"
+                data-search-target="clear"
+                data-action="search#clearSearch">
+          <span>×</span>
+        </button>
+      </div>
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium text-slate-700 mb-2">
+        <span class="mr-2 text-slate-400">↕</span>Sort by
+      </label>
+      <%= f.select :sort,
+          options_for_select(
+            @model_klass.column_names.map { |col| [col.humanize, col] },
+            params[:sort]
+          ),
+          { prompt: 'Sort by...' },
+          { class: 'w-full px-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-slate-50 focus:bg-white' } %>
+    </div>
+
+    <div class="flex items-end space-x-2">
+      <%= f.submit "Search",
+          class: 'flex-1 px-6 py-3 bg-slate-600 text-white font-medium rounded-xl hover:bg-slate-700 transition-all duration-200 shadow-sm hover:shadow-md',
+          data: { search_target: "loading", search_loading_class: "hidden" } %>
+
+      <% if params[:search].present? || params[:sort].present? %>
+        <%= link_to solidcrud.admin_model_path(@model_name),
+            class: 'px-4 py-3 bg-slate-100 text-slate-600 font-medium rounded-xl hover:bg-slate-200 transition-all duration-200',
+            data: { turbo_frame: "_top" } do %>
+          <span>×</span>
+        <% end %>
+      <% end %>
+    </div>
+
+    <%= f.hidden_field :direction, value: params[:direction] %>
+  <% end %>
+</div>
+
+<!-- Column Selection Section -->
+<div class="bg-white rounded-2xl shadow-sm border border-slate-200/50 p-6 mb-6">
+  <div class="flex items-center justify-between mb-4">
+    <div class="flex items-center space-x-3">
+      <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-600 rounded-xl flex items-center justify-center shadow-lg">
+        <span class="text-white">📊</span>
+      </div>
+      <div>
+        <h3 class="text-lg font-semibold text-slate-900">Table Columns</h3>
+        <p class="text-sm text-slate-600">Select which columns to display</p>
+      </div>
+    </div>
+    <div class="flex items-center space-x-2">
+      <button type="button" id="select-all-columns" class="px-3 py-2 text-sm bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-all duration-200" data-action="click->table#selectAllColumns">
+        <span class="mr-1">☑</span>Select All
+      </button>
+      <button type="button" id="deselect-all-columns" class="px-3 py-2 text-sm bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-all duration-200" data-action="click->table#deselectAllColumns">
+        <span class="mr-1">☐</span>Deselect All
+      </button>
+    </div>
+  </div>
+
+  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-3" id="column-checkboxes">
+    <% @model_klass.column_names.each do |col| %>
+      <label class="flex items-center space-x-2 p-2 rounded-lg hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
+        <input type="checkbox"
+               class="column-checkbox w-4 h-4 text-blue-600 bg-slate-100 border-slate-300 rounded focus:ring-blue-500 focus:ring-2"
+               value="<%= col %>"
+               data-table-target="checkbox"
+               <%= 'checked' if column_visible?(col, @model_name) %>>
+        <span class="text-sm text-slate-700 flex items-center space-x-1">
+          <span class="text-slate-400"><%= column_icon(col) %></span>
+          <span><%= col.humanize %></span>
+        </span>
+      </label>
+    <% end %>
+  </div>
+</div>
+
+<!-- Data Table -->
+<div class="bg-white rounded-2xl shadow-sm border border-slate-200/50 overflow-hidden" data-controller="table" id="records-table">
+  <% if @records.any? %>
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <thead class="bg-gradient-to-r from-slate-50 to-slate-100 border-b border-slate-200/50">
+          <tr>
+            <% @model_klass.column_names.each do |col| %>
+              <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider column-header column-visible"
+                  data-column="<%= col %>"
+                  data-table-target="header">
+                <%= link_to solidcrud.admin_model_path(@model_name,
+                    search: params[:search],
+                    sort: col,
+                    direction: (params[:sort] == col && params[:direction] != 'desc') ? 'desc' : 'asc'
+                  ), class: 'group flex items-center space-x-2 hover:text-slate-900 transition-colors duration-200',
+                  data: { turbo_frame: "_top" } do %>
+                  <span class="text-slate-400 group-hover:text-slate-600"><%= column_icon(col) %></span>
+                  <span><%= col.humanize %></span>
+                  <% if params[:sort] == col %>
+                    <span class="text-blue-500"><%= params[:direction] == 'desc' ? '↓' : '↑' %></span>
+                  <% else %>
+                    <span class="text-slate-300 group-hover:text-slate-400">↕</span>
+                  <% end %>
+                <% end %>
+              </th>
+            <% end %>
+            <th class="px-6 py-4 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider w-32">
+              Actions
+            </th>
+          </tr>
+        </thead>
+
+        <tbody class="divide-y divide-slate-200/50">
+          <% @records.each do |record| %>
+            <tr class="hover:bg-slate-50 transition-colors duration-200" data-table-target="row" data-id="<%= record.id %>">
+              <% @model_klass.column_names.each do |col| %>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 column-cell column-visible"
+                    data-column="<%= col %>"
+                    data-table-target="column">
+                  <%= format_value(record.send(col), col, @model_klass) %>
+                </td>
+              <% end %>
+              <td class="px-6 py-4 whitespace-nowrap text-center">
+                <div class="flex items-center justify-center space-x-2">
+                  <%= link_to solidcrud.edit_admin_model_path(@model_name, record),
+                      class: 'inline-flex items-center px-3 py-2 bg-blue-50 text-blue-700 font-medium rounded-lg hover:bg-blue-100 transition-all duration-200 hover:shadow-sm',
+                      title: 'Edit',
+                      data: { turbo_frame: "_top" } do %>
+                    <span class="text-lg">✏️</span>
+                  <% end %>
+
+                  <%= link_to "#",
+                      data: {
+                        modal_title: "Delete #{record.class.name}",
+                        modal_message: "Are you sure you want to delete this #{record.class.name.downcase}? This action cannot be undone.",
+                        modal_confirm_text: "Delete",
+                        modal_cancel_text: "Cancel",
+                        modal_url: solidcrud.admin_model_path(@model_name, id: record.id),
+                        action: "modal#confirmDelete"
+                      },
+                      class: 'inline-flex items-center px-3 py-2 bg-red-50 text-red-700 font-medium rounded-lg hover:bg-red-100 transition-all duration-200 hover:shadow-sm delete-record-btn',
+                      title: 'Delete' do %>
+                    <span class="text-lg">🗑️</span>
+                  <% end %>
+                </div>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Pagination Footer -->
+    <div class="bg-slate-50 px-6 py-4 border-t border-slate-200/50">
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
+        <div class="text-sm text-slate-600">
+          Showing <%= (@page - 1) * @per_page + 1 %>-<%= [(@page - 1) * @per_page + @records.count, @total_count].min %>
+          of <%= @total_count %> <%= @model_name.pluralize.downcase %>
+          <% if params[:search].present? %>
+            <span class="text-blue-600 font-medium">(filtered)</span>
+          <% end %>
+        </div>
+
+        <% if @total_pages > 1 %>
+          <div class="flex items-center space-x-2">
+            <% if @page > 1 %>
+              <%= link_to solidcrud.admin_model_path(@model_name, search: params[:search], sort: params[:sort], direction: params[:direction], page: @page - 1),
+                  class: 'inline-flex items-center px-3 py-2 bg-white border border-slate-300 text-slate-700 font-medium rounded-lg hover:bg-slate-50 transition-all duration-200' do %>
+                <span class="mr-1">‹</span>Previous
+              <% end %>
+            <% end %>
+
+            <% start_page = [@page - 2, 1].max %>
+            <% end_page = [start_page + 4, @total_pages].min %>
+            <% start_page = [end_page - 4, 1].max if end_page - start_page < 4 %>
+
+            <% (start_page..end_page).each do |page_num| %>
+              <%= link_to page_num,
+                  solidcrud.admin_model_path(@model_name, search: params[:search], sort: params[:sort], direction: params[:direction], page: page_num),
+                  class: "inline-flex items-center px-3 py-2 font-medium rounded-lg transition-all duration-200 #{'bg-blue-500 text-white shadow-sm' if page_num == @page} #{'bg-white border border-slate-300 text-slate-700 hover:bg-slate-50' if page_num != @page}" %>
+            <% end %>
+
+            <% if @page < @total_pages %>
+              <%= link_to solidcrud.admin_model_path(@model_name, search: params[:search], sort: params[:sort], direction: params[:direction], page: @page + 1),
+                  class: 'inline-flex items-center px-3 py-2 bg-white border border-slate-300 text-slate-700 font-medium rounded-lg hover:bg-slate-50 transition-all duration-200' do %>
+                Next<span class="ml-1">›</span>
+              <% end %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% else %>
+    <div class="px-6 py-16 text-center">
+      <div class="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-6">
+        <span class="text-3xl">📭</span>
+      </div>
+      <h6 class="text-xl font-semibold text-slate-900 mb-2">No <%= @model_name.pluralize.downcase %> found</h6>
+      <p class="text-slate-500 mb-6">Get started by creating your first <%= @model_name.downcase %>.</p>
+      <%= link_to solidcrud.new_admin_model_path(@model_name),
+          class: "inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105" do %>
+        <span class="mr-2">+</span>Create First <%= @model_name %>
+      <% end %>
+    </div>
+  <% end %>
+</div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/solidcrud/admin/new.html.erb

@@ -0,0 +1,275 @@
+<div class="flex h-screen bg-gradient-to-br from-slate-50 to-slate-100">
+  <!-- Sidebar -->
+  <div class="w-80 bg-white border-r border-slate-200/50 flex flex-col" data-controller="navigation">
+    <!-- Logo Section -->
+    <div class="p-6 border-b border-slate-200/50">
+      <div class="flex items-center space-x-3">
+        <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+          <span class="text-white">🧊</span>
+        </div>
+        <div>
+          <h2 class="text-lg font-bold text-slate-900">SolidCRUD</h2>
+          <p class="text-xs text-slate-500">Admin Panel</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation Menu -->
+    <nav class="flex-1 p-4">
+      <div class="space-y-1">
+        <a href="<%= solidcrud.root_path %>"
+           class="nav-item flex items-center space-x-3 px-4 py-3 text-slate-700 hover:bg-slate-100 rounded-xl transition-all duration-200 group"
+           data-path="/admin"
+           data-action="navigation#handleNavClick">
+          <div class="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center group-hover:bg-blue-100 transition-colors duration-200">
+            <span class="text-slate-500 group-hover:text-blue-600">📊</span>
+          </div>
+          <span class="font-medium">Dashboard</span>
+        </a>
+
+        <div class="pt-4">
+          <h3 class="px-4 text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Models</h3>
+          <div class="space-y-1">
+            <% @models.each do |model| %>
+              <a href="<%= solidcrud.admin_model_path(model.name) %>"
+                 class="nav-item flex items-center space-x-3 px-4 py-3 text-slate-700 hover:bg-slate-100 rounded-xl transition-all duration-200 group"
+                 data-path="/admin/<%= model.name %>"
+                 data-action="navigation#handleNavClick">
+                <div class="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center group-hover:bg-blue-100 transition-colors duration-200">
+                  <span class="text-slate-500 group-hover:text-blue-600">📋</span>
+                </div>
+                <div class="flex-1 min-w-0">
+                  <div class="font-medium truncate"><%= model.name.pluralize %></div>
+                  <div class="text-xs text-slate-500"><%= model.count %> records</div>
+                </div>
+              </a>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Footer -->
+    <div class="p-4 border-t border-slate-200/50">
+      <div class="text-xs text-slate-500 text-center">
+        Rails <%= Rails.version %> • SolidCRUD
+      </div>
+    </div>
+  </div>
+
+  <!-- Main Content Area -->
+  <div class="flex-1 flex flex-col overflow-hidden">
+    <!-- Content Header with Flash Messages -->
+    <div class="bg-white border-b border-slate-200/50 px-8 py-6">
+      <!-- Flash Messages -->
+      <% if flash[:notice] %>
+        <div class="mb-6 bg-green-50 border border-green-200 rounded-xl p-4 flex items-start space-x-3 animate-in slide-in-from-top-2 duration-300">
+          <div class="flex-shrink-0">
+            <span class="text-green-500 text-lg">✓</span>
+          </div>
+          <div class="flex-1">
+            <p class="text-green-800 font-medium"><%= flash[:notice] %></p>
+          </div>
+          <button class="flex-shrink-0 text-green-400 hover:text-green-600 transition-colors duration-200">
+            <span class="text-lg">×</span>
+          </button>
+        </div>
+      <% end %>
+
+      <% if flash[:alert] %>
+        <div class="mb-6 bg-red-50 border border-red-200 rounded-xl p-4 flex items-start space-x-3 animate-in slide-in-from-top-2 duration-300">
+          <div class="flex-shrink-0">
+            <span class="text-red-500 text-lg">⚠️</span>
+          </div>
+          <div class="flex-1">
+            <p class="text-red-800 font-medium"><%= flash[:alert] %></p>
+          </div>
+          <button class="flex-shrink-0 text-red-400 hover:text-red-600 transition-colors duration-200">
+            <span class="text-lg">×</span>
+          </button>
+        </div>
+      <% end %>
+    </div>
+
+    <!-- Scrollable Content -->
+    <div class="flex-1 overflow-y-auto">
+      <div class="px-8 py-6">
+        <!-- Header Section -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8">
+          <div class="mb-4 sm:mb-0">
+            <!-- Breadcrumb -->
+            <nav class="flex items-center space-x-2 text-sm text-slate-500 mb-2">
+              <a href="<%= solidcrud.root_path %>" class="hover:text-slate-700 transition-colors duration-200">
+                <span class="mr-1">🏠</span>Dashboard
+              </a>
+              <span class="text-slate-400">›</span>
+              <a href="<%= solidcrud.admin_model_path(@model_name) %>" class="hover:text-slate-700 transition-colors duration-200">
+                <%= @model_name.pluralize %>
+              </a>
+              <span class="text-slate-400">›</span>
+              <span class="text-slate-900 font-medium">New</span>
+            </nav>
+
+            <div class="flex items-center space-x-4">
+              <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg">
+                <span class="text-white text-lg">+</span>
+              </div>
+              <div>
+                <h1 class="text-3xl font-bold text-slate-900">Create New <%= @model_name %></h1>
+                <p class="text-slate-600 mt-1">Add a new <%= @model_name.downcase %> to your database</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+  <!-- Main Form -->
+  <div class="lg:col-span-2">
+    <!-- Information Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+      <!-- Model Info Card -->
+      <div class="bg-white rounded-2xl shadow-sm border border-slate-200/50 p-6">
+        <div class="flex items-center space-x-3 mb-4">
+          <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
+            <span class="text-white">ℹ️</span>
+          </div>
+          <div>
+            <h6 class="text-lg font-semibold text-slate-900">Model Info</h6>
+            <p class="text-sm text-slate-600">Basic information</p>
+          </div>
+        </div>
+        <div class="space-y-3">
+          <div class="flex justify-between items-center">
+            <span class="text-sm text-slate-600">Name</span>
+            <span class="text-sm font-medium text-slate-900"><%= @model_name %></span>
+          </div>
+          <div class="flex justify-between items-center">
+            <span class="text-sm text-slate-600">Table</span>
+            <span class="text-sm font-medium text-slate-900"><%= @model_klass.table_name %></span>
+          </div>
+          <div class="flex justify-between items-center">
+            <span class="text-sm text-slate-600">Fields</span>
+            <span class="text-sm font-medium text-slate-900"><%= @model_klass.column_names.size %></span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Model Stats Card -->
+      <div class="bg-white rounded-2xl shadow-sm border border-slate-200/50 p-6">
+        <div class="flex items-center space-x-3 mb-4">
+          <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg">
+            <span class="text-white">📊</span>
+          </div>
+          <div>
+            <h6 class="text-lg font-semibold text-slate-900">Model Stats</h6>
+            <p class="text-sm text-slate-600">Database overview</p>
+          </div>
+        </div>
+        <div class="space-y-3">
+          <div class="flex justify-between items-center">
+            <span class="text-sm text-slate-600">Total Records</span>
+            <span class="text-sm font-medium text-slate-900"><%= @model_klass.count %></span>
+          </div>
+          <div class="flex justify-between items-center">
+            <span class="text-sm text-slate-600">Required Fields</span>
+            <span class="text-sm font-medium text-slate-900"><%= @model_klass.columns.reject { |c| c.null }.size %></span>
+          </div>
+          <div class="flex justify-between items-center">
+            <span class="text-sm text-slate-600">Optional Fields</span>
+            <span class="text-sm font-medium text-slate-900"><%= @model_klass.columns.select { |c| c.null }.size %></span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Quick Actions Card -->
+      <div class="bg-white rounded-2xl shadow-sm border border-slate-200/50 p-6">
+        <div class="flex items-center space-x-3 mb-4">
+          <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-600 rounded-xl flex items-center justify-center shadow-lg">
+            <span class="text-white">⚡</span>
+          </div>
+          <div>
+            <h6 class="text-lg font-semibold text-slate-900">Quick Actions</h6>
+            <p class="text-sm text-slate-600">Common tasks</p>
+          </div>
+        </div>
+        <div class="space-y-2">
+          <%= link_to solidcrud.admin_model_path(@model_name),
+              class: 'block w-full text-left px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 rounded-lg transition-colors duration-200' do %>
+            <span class="mr-2 text-slate-400">←</span>Back to List
+          <% end %>
+          <%= link_to solidcrud.root_path,
+              class: 'block w-full text-left px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 rounded-lg transition-colors duration-200' do %>
+            <span class="mr-2 text-slate-400">🏠</span>Dashboard
+          <% end %>
+          <%= link_to solidcrud.admin_model_path(@model_name) + '?sort=created_at&direction=desc',
+              class: 'block w-full text-left px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 rounded-lg transition-colors duration-200' do %>
+            <span class="mr-2 text-slate-400">🕒</span>Recent Records
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-200/50 p-8">
+      <div class="flex items-center space-x-3 mb-8">
+        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
+          <span class="text-blue-600">✏️</span>
+        </div>
+        <h6 class="text-xl font-semibold text-slate-900"><%= @model_name %> Details</h6>
+      </div>
+
+      <%= form_with model: @record, url: solidcrud.admin_model_path(@model_name), local: true, class: 'space-y-6',
+          data: { turbo_frame: "_top" } do |f| %>
+        <% if @record.errors.any? %>
+          <div class="bg-red-50 border border-red-200 rounded-xl p-4">
+            <div class="flex items-start space-x-3">
+              <div class="flex-shrink-0">
+                <span class="text-red-500 text-lg">⚠️</span>
+              </div>
+              <div class="flex-1">
+                <h6 class="text-red-800 font-semibold mb-2">Please fix the following errors:</h6>
+                <ul class="text-red-700 text-sm space-y-1">
+                  <% @record.errors.full_messages.each do |message| %>
+                    <li>• <%= message %></li>
+                  <% end %>
+                </ul>
+              </div>
+            </div>
+          </div>
+        <% end %>
+
+        <% editable_columns = @model_klass.column_names.reject { |c| ["id", "created_at", "updated_at"].include?(c) } %>
+        <% editable_columns.each do |col| %>
+          <% column_obj = @model_klass.columns_hash[col] %>
+          <div>
+            <%= f.label col, class: 'block text-sm font-semibold text-slate-700 mb-2' do %>
+              <span class="mr-2 text-slate-400"><%= column_icon(col) %></span>
+              <%= col.humanize %>
+              <% if column_obj&.null == false %>
+                <span class="text-red-500 ml-1">*</span>
+              <% end %>
+            <% end %>
+            <%= render_form_field(f, col, @model_klass) %>
+            <% if column_obj&.comment.present? %>
+              <p class="mt-1 text-sm text-slate-500"><%= column_obj.comment %></p>
+            <% end %>
+          </div>
+        <% end %>
+
+        <!-- Form Actions -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between pt-6 border-t border-slate-200 space-y-4 sm:space-y-0">
+          <%= link_to solidcrud.admin_model_path(@model_name),
+              class: 'inline-flex items-center px-6 py-3 bg-slate-100 text-slate-700 font-medium rounded-xl hover:bg-slate-200 transition-all duration-200' do %>
+            <span class="mr-2">←</span>Cancel
+          <% end %>
+
+          <%= f.submit "Create #{@model_name}",
+              class: 'inline-flex items-center px-8 py-3 bg-gradient-to-r from-green-500 to-emerald-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105' do %>
+            <span class="mr-2">💾</span>Create <%= @model_name %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Sidebar -->
+  <%= render 'solidcrud/admin/shared/new_form_sidebar' %>