panda-core 0.12.5 → 1.1.0

data/app/views/panda/core/admin/dashboard/_default_content.html.erb

@@ -1,73 +1 @@
-<div class="mt-5">
-  <div class="p-6 bg-white shadow rounded-lg">
-    <h2 class="text-lg font-medium text-gray-900">Welcome to Panda Admin</h2>
-    <p class="mt-1 text-sm text-gray-500">Manage your application from this central dashboard.</p>
-  </div>
-
-  <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
-    <% if defined?(Panda::CMS) %>
-      <div class="bg-white overflow-hidden shadow rounded-lg">
-        <div class="px-4 py-5 sm:p-6">
-          <div class="flex items-center">
-            <div class="flex-shrink-0">
-              <i class="fa-solid fa-file-lines text-3xl text-gray-400"></i>
-            </div>
-            <div class="ml-5 w-0 flex-1">
-              <dt class="text-sm font-medium text-gray-500 truncate">Content Management</dt>
-              <dd class="mt-1 text-lg font-semibold text-gray-900">
-                <%= link_to "Manage CMS", panda_cms.admin_cms_dashboard_path, class: "text-primary-600 hover:text-primary-800" %>
-              </dd>
-            </div>
-          </div>
-          <div class="mt-3">
-            <p class="text-sm text-gray-500">Pages, posts, menus, and content blocks</p>
-          </div>
-        </div>
-      </div>
-    <% end %>
-
-    <div class="bg-white overflow-hidden shadow rounded-lg">
-      <div class="px-4 py-5 sm:p-6">
-        <div class="flex items-center">
-          <div class="flex-shrink-0">
-            <i class="fa-regular fa-user text-3xl text-gray-400"></i>
-          </div>
-          <div class="ml-5 w-0 flex-1">
-            <dt class="text-sm font-medium text-gray-500 truncate">My Profile</dt>
-            <dd class="mt-1 text-lg font-semibold text-gray-900">
-              <%= link_to "Edit Profile", edit_admin_my_profile_path, class: "text-primary-600 hover:text-primary-800" %>
-            </dd>
-          </div>
-        </div>
-        <div class="mt-3">
-          <p class="text-sm text-gray-500">Update your personal information</p>
-        </div>
-      </div>
-    </div>
-
-    <%# Hook for additional dashboard cards %>
-    <% if Panda::Core.config.respond_to?(:admin_dashboard_cards) %>
-      <% cards = Panda::Core.config.admin_dashboard_cards&.call(current_user) %>
-      <% cards&.each do |card| %>
-        <div class="bg-white overflow-hidden shadow rounded-lg">
-          <div class="px-4 py-5 sm:p-6">
-            <div class="flex items-center">
-              <div class="flex-shrink-0">
-                <i class="<%= card[:icon] %> text-3xl text-gray-400"></i>
-              </div>
-              <div class="ml-5 w-0 flex-1">
-                <dt class="text-sm font-medium text-gray-500 truncate"><%= card[:title] %></dt>
-                <dd class="mt-1 text-lg font-semibold text-gray-900">
-                  <%= link_to card[:link_text], card[:path], class: "text-primary-600 hover:text-primary-800" %>
-                </dd>
-              </div>
-            </div>
-            <div class="mt-3">
-              <p class="text-sm text-gray-500"><%= card[:description] %></p>
-            </div>
-          </div>
-        </div>
-      <% end %>
-    <% end %>
-  </div>
-</div>
+<%= render Panda::Core::Admin::DashboardDefaultContentComponent.new(user: current_user) %>

data/app/views/panda/core/admin/dashboard/show.html.erb

@@ -1,21 +1,18 @@
 <div class="" data-controller="dashboard">
-  <%= render Panda::Core::Admin::ContainerComponent.new do |container| %>
-    <% container.heading(text: "Dashboard", level: 1) %>
-
-    <%# Hook for dashboard widgets %>
-    <% if Panda::Core.config.admin_dashboard_widgets %>
-      <% widgets = Panda::Core.config.admin_dashboard_widgets.call(current_user) %>
-      <% if widgets && widgets.any? %>
-        <div class="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-3">
-          <% widgets.each do |widget| %>
-            <%= render widget %>
-          <% end %>
-        </div>
-      <% else %>
-        <%= render "panda/core/admin/dashboard/default_content" %>
-      <% end %>
+  <% container = Panda::Core::Admin::ContainerComponent.new %>
+  <% container.with_heading_slot(text: "Dashboard", level: 1) %>
+  <% container.with_body_slot do %>
+    <%# Dashboard widgets from WidgetRegistry (includes legacy lambda + registered widgets) %>
+    <% widgets = Panda::Core::WidgetRegistry.build(current_user) %>
+    <% if widgets.any? %>
+      <div class="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-3">
+        <% widgets.each do |widget| %>
+          <%= render widget %>
+        <% end %>
+      </div>
     <% else %>
       <%= render "panda/core/admin/dashboard/default_content" %>
     <% end %>
   <% end %>
+  <%= render container %>
 </div>

data/app/views/panda/core/admin/feature_flags/index.html.erb

@@ -0,0 +1,56 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "Feature Flags", level: 1) %>
+
+  <% if @feature_flags.any? %>
+    <% @grouped_flags.each do |namespace, flags| %>
+      <div class="mb-8">
+        <h2 class="text-lg font-semibold text-gray-700 mb-3"><%= namespace.titleize %></h2>
+
+        <%= render Panda::Core::Admin::TableComponent.new(term: "feature flag", rows: flags, icon: "fa-solid fa-toggle-on") do |table| %>
+          <% table.column("Flag", width: "35%") do |flag| %>
+            <div>
+              <div class="font-medium text-gray-900"><%= flag.key %></div>
+              <% if flag.description.present? %>
+                <div class="text-sm text-gray-500"><%= flag.description %></div>
+              <% end %>
+            </div>
+          <% end %>
+
+          <% table.column("Status", width: "20%") do |flag| %>
+            <% if flag.enabled? %>
+              <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
+                <i class="fa-solid fa-check mr-1"></i> Enabled
+              </span>
+            <% else %>
+              <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
+                <i class="fa-solid fa-xmark mr-1"></i> Disabled
+              </span>
+            <% end %>
+          <% end %>
+
+          <% table.column("Last Updated", width: "20%") do |flag| %>
+            <span class="text-sm text-gray-500"><%= flag.updated_at.strftime("%d %b %Y %H:%M") %></span>
+          <% end %>
+
+          <% table.column("", width: "25%") do |flag| %>
+            <div class="flex justify-end">
+              <%= button_to admin_feature_flag_path(flag), method: :patch, class: "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition #{flag.enabled? ? 'text-red-600 hover:text-red-700 hover:bg-red-50' : 'text-green-600 hover:text-green-700 hover:bg-green-50'}" do %>
+                <% if flag.enabled? %>
+                  <i class="fa-solid fa-toggle-on"></i> Disable
+                <% else %>
+                  <i class="fa-solid fa-toggle-off"></i> Enable
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  <% else %>
+    <div class="text-center py-12">
+      <i class="fa-solid fa-toggle-off text-4xl text-gray-300 mb-3"></i>
+      <p class="text-gray-500">No feature flags registered.</p>
+      <p class="text-sm text-gray-400 mt-1">Feature flags are registered by application code during initialization.</p>
+    </div>
+  <% end %>
+<% end %>

data/app/views/panda/core/admin/file_categories/_form.html.erb

@@ -0,0 +1,20 @@
+<%= panda_form_with model: file_category,
+            url: file_category.persisted? ? admin_file_category_path(file_category) : admin_file_categories_path,
+            method: file_category.persisted? ? :patch : :post,
+            local: true do |f| %>
+  <%= render Panda::Core::Admin::FormErrorComponent.new(model: file_category) %>
+
+  <%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+    <% panel.with_heading_slot { "Category Settings" } %>
+    <div class="space-y-4">
+      <%= f.text_field :name, placeholder: "e.g. Project Assets" %>
+      <%= f.text_field :icon, label: "Icon (FontAwesome class)", placeholder: "e.g. fa-solid fa-folder", meta: "Use fa-solid or fab icon classes only." %>
+      <%= f.number_field :position, label: "Display Order", value: file_category.position || 100 %>
+      <%= f.collection_select :parent_id, Panda::Core::FileCategory.roots.ordered.where.not(id: file_category.id), :id, :name, { include_blank: "None (top-level)", label: "Parent Category" } %>
+    </div>
+  <% end %>
+
+  <%= render Panda::Core::Admin::FormFooterComponent.new(
+    submit_text: file_category.persisted? ? "Update Category" : "Create Category"
+  ) %>
+<% end %>

data/app/views/panda/core/admin/file_categories/edit.html.erb

@@ -0,0 +1,5 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "Edit File Category: #{@file_category.name}", level: 1) %>
+
+  <%= render partial: "form", locals: { file_category: @file_category } %>
+<% end %>

data/app/views/panda/core/admin/file_categories/index.html.erb

@@ -0,0 +1,55 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "File Categories", level: 1) do |heading| %>
+    <% heading.with_button(action: :add, text: "Add Category", href: new_admin_file_category_path) %>
+  <% end %>
+
+  <% if @file_categories.any? %>
+    <%= render Panda::Core::Admin::TableComponent.new(term: "file category", rows: @file_categories, icon: "fa-solid fa-folder") do |table| %>
+      <% table.column("Category", width: "40%") do |category| %>
+        <div class="flex items-center gap-3">
+          <% if category.icon.present? %>
+            <i class="<%= category.icon %> text-gray-400"></i>
+          <% else %>
+            <i class="fa-solid fa-folder text-gray-400"></i>
+          <% end %>
+          <div>
+            <div class="font-medium text-gray-900"><%= category.name %></div>
+            <div class="text-sm text-gray-500"><%= category.slug %></div>
+          </div>
+        </div>
+      <% end %>
+      <% table.column("Type", width: "15%") do |category| %>
+        <% if category.system? %>
+          <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
+            System
+          </span>
+        <% else %>
+          <span class="inline-flex items-center rounded-md bg-primary-50 px-2 py-1 text-xs font-medium text-primary-700 ring-1 ring-inset ring-primary-600/20">
+            Custom
+          </span>
+        <% end %>
+      <% end %>
+      <% table.column("Files", width: "15%") do |category| %>
+        <span class="text-sm text-gray-500"><%= category.file_categorizations.count %></span>
+      <% end %>
+      <% table.column("", width: "30%") do |category| %>
+        <div class="flex justify-end gap-2">
+          <% unless category.system? %>
+            <%= link_to edit_admin_file_category_path(category), class: "text-sm text-primary-600 hover:text-primary-700" do %>
+              <i class="fa-solid fa-pencil"></i> Edit
+            <% end %>
+            <%= button_to admin_file_category_path(category), method: :delete, class: "text-sm text-red-600 hover:text-red-700", form: { data: { turbo_confirm: "Are you sure you want to delete this category? Files will become uncategorized." } } do %>
+              <i class="fa-solid fa-trash"></i> Delete
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    <% end %>
+  <% else %>
+    <div class="text-center py-12">
+      <i class="fa-solid fa-folder text-4xl text-gray-300 mb-3"></i>
+      <p class="text-gray-500">No file categories found.</p>
+      <p class="text-sm text-gray-400 mt-1">Run <code>rails panda:core:file_categories:seed</code> to create default categories.</p>
+    </div>
+  <% end %>
+<% end %>

data/app/views/panda/core/admin/file_categories/new.html.erb

@@ -0,0 +1,5 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "New File Category", level: 1) %>
+
+  <%= render partial: "form", locals: { file_category: @file_category } %>
+<% end %>

data/app/views/panda/core/admin/files/_file_details.html.erb

@@ -0,0 +1,156 @@
+<%# Flash messages %>
+<% if local_assigns[:notice] %>
+  <div class="rounded-lg bg-green-50 dark:bg-green-900/20 p-3">
+    <div class="flex items-center gap-2">
+      <i class="fa-solid fa-check-circle text-green-500"></i>
+      <p class="text-sm font-medium text-green-800 dark:text-green-200"><%= notice %></p>
+    </div>
+  </div>
+<% end %>
+<% if local_assigns[:error] %>
+  <div class="rounded-lg bg-red-50 dark:bg-red-900/20 p-3">
+    <div class="flex items-center gap-2">
+      <i class="fa-solid fa-exclamation-circle text-red-500"></i>
+      <p class="text-sm font-medium text-red-800 dark:text-red-200"><%= error %></p>
+    </div>
+  </div>
+<% end %>
+
+<%# Image/file preview %>
+<div class="block overflow-hidden w-full rounded-lg aspect-h-7 aspect-w-10">
+  <% if file.image? %>
+    <%= image_tag main_app.rails_blob_path(file, only_path: true), alt: file.filename.to_s, class: "object-cover", onerror: "this.onerror=null;this.style.display='none';this.nextElementSibling.classList.remove('hidden')" %>
+    <div class="hidden flex items-center justify-center h-full bg-gray-100 dark:bg-white/5" role="img" aria-label="Image preview not available">
+      <i class="fa-solid fa-file-image text-4xl text-gray-400"></i>
+    </div>
+  <% else %>
+    <div class="flex items-center justify-center h-full bg-gray-100 dark:bg-white/5">
+      <div class="text-center">
+        <i class="fa-solid fa-file text-4xl text-gray-400"></i>
+        <p class="mt-1 text-xs text-gray-500 uppercase"><%= file.content_type&.split("/")&.last || "file" %></p>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<%# Edit form %>
+<% ext = File.extname(file.filename.to_s) %>
+<% base_name = File.basename(file.filename.to_s, ext) %>
+<% current_categorization = Panda::Core::FileCategorization.find_by(blob_id: file.id) %>
+
+<%= panda_form_with url: admin_file_path(file), method: :patch, scope: :blob, data: { turbo: true } do |f| %>
+  <%# Filename with read-only extension suffix %>
+  <div class="panda-core-field-container mb-4">
+    <label for="blob_filename" class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100">Filename</label>
+    <div class="flex">
+      <input type="text" name="blob[filename]" id="blob_filename" value="<%= base_name %>" autocomplete="off"
+        class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-primary-500 <%= "rounded-r-none" if ext.present? %>">
+      <% if ext.present? %>
+        <span class="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500 dark:border-white/10 dark:bg-white/10 dark:text-gray-400 whitespace-nowrap"><%= ext %></span>
+      <% end %>
+    </div>
+  </div>
+
+  <%= f.select :file_category_id,
+    options_for_select(
+      file_categories.map { |c| [c.name, c.id] },
+      current_categorization&.file_category_id
+    ),
+    { include_blank: "No category", label: "Category" } %>
+
+  <%= f.text_area :description, value: file.metadata["description"].to_s, label: "Description" %>
+
+  <%= render Panda::Core::Admin::FormFooterComponent.new(submit_text: "Save") %>
+<% end %>
+
+<%# Information %>
+<div class="mt-2">
+  <h3 class="font-medium text-gray-900 dark:text-gray-100">Information</h3>
+  <dl class="mt-2 border-t border-b border-gray-200 dark:border-white/10 divide-y divide-gray-200 dark:divide-white/10">
+    <div class="flex justify-between py-3 text-sm">
+      <dt class="font-medium text-gray-500 dark:text-gray-400">Created</dt>
+      <dd class="text-gray-900 dark:text-gray-100 whitespace-nowrap"><%= file.created_at.strftime("%B %-d, %Y") %></dd>
+    </div>
+    <% if file.metadata["uploaded_by_name"].present? %>
+      <div class="flex justify-between py-3 text-sm">
+        <dt class="font-medium text-gray-500 dark:text-gray-400">Uploaded by</dt>
+        <dd class="text-gray-900 dark:text-gray-100 whitespace-nowrap"><%= file.metadata["uploaded_by_name"] %></dd>
+      </div>
+    <% end %>
+  </dl>
+</div>
+
+<%# Helper to format content type as human-readable label %>
+<%
+  friendly_content_type = lambda do |ct|
+    subtype = ct.to_s.split("/").last&.upcase
+    case ct.to_s
+    when /\Aimage\// then "#{subtype == "JPEG" ? "JPG" : subtype} Image"
+    when /\Avideo\// then "#{subtype} Video"
+    when /\Aaudio\// then "#{subtype} Audio"
+    when "application/pdf" then "PDF Document"
+    else subtype || ct.to_s
+    end
+  end
+%>
+
+<%# Versions (images only — always show original, plus any variants) %>
+<% if file.image? %>
+  <% variant_blobs = file.variant_records.includes(image_attachment: :blob).filter_map { |vr| vr.image&.blob } %>
+  <% variant_blobs.sort_by! { |b| [-(b.metadata["width"].to_i * b.metadata["height"].to_i), -b.byte_size] } %>
+  <div class="mt-4">
+    <h3 class="font-medium text-gray-900 dark:text-gray-100">Versions</h3>
+    <div class="mt-2 space-y-3">
+      <%# Original %>
+      <div class="border border-gray-200 dark:border-white/10 rounded-lg p-3">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Original</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">
+              <% if file.metadata["width"] && file.metadata["height"] %>
+                <%= file.metadata["width"] %>&times;<%= file.metadata["height"] %> &middot;
+              <% end %>
+              <%= number_to_human_size(file.byte_size) %> &middot;
+              <%= friendly_content_type.call(file.content_type) %>
+            </p>
+          </div>
+          <%= link_to main_app.rails_blob_path(file, disposition: "attachment"), class: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" do %>
+            <i class="fa-solid fa-download text-sm"></i>
+          <% end %>
+        </div>
+      </div>
+      <%# Variant records (sorted by dimensions desc) %>
+      <% variant_blobs.each do |variant_blob| %>
+        <div class="border border-gray-200 dark:border-white/10 rounded-lg p-3">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Variant</p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                <% if variant_blob.metadata["width"] && variant_blob.metadata["height"] %>
+                  <%= variant_blob.metadata["width"] %>&times;<%= variant_blob.metadata["height"] %> &middot;
+                <% end %>
+                <%= number_to_human_size(variant_blob.byte_size) %> &middot;
+                <%= friendly_content_type.call(variant_blob.content_type) %>
+              </p>
+            </div>
+            <%= link_to main_app.rails_blob_path(variant_blob, disposition: "attachment"), class: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" do %>
+              <i class="fa-solid fa-download text-sm"></i>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+
+<%# Action buttons %>
+<div class="flex gap-x-3 mt-4">
+  <%= link_to main_app.rails_blob_path(file, disposition: "attachment"), class: "flex-1 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-xl shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 text-center dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200" do %>
+    <i class="fa-solid fa-download mr-1"></i> Download Original
+  <% end %>
+  <%= button_to admin_file_path(file), method: :delete, class: "flex-1", form: { data: { turbo_confirm: "Are you sure you want to delete this file?" } } do %>
+    <span class="block w-full py-2 px-3 text-sm font-medium text-red-700 bg-white rounded-xl border border-red-200 shadow-sm hover:bg-red-50 text-center cursor-pointer dark:bg-transparent dark:text-red-400 dark:border-red-800 dark:hover:bg-red-950">
+      <i class="fa-solid fa-trash mr-1"></i> Delete
+    </span>
+  <% end %>
+</div>

data/app/views/panda/core/admin/files/index.html.erb

@@ -0,0 +1,61 @@
+<div data-controller="file-gallery" data-file-gallery-files-path-value="<%= admin_files_path %>">
+  <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+    <% component.with_heading_slot(text: "Files", level: 1) do |heading| %>
+      <% heading.with_button(text: "Upload", icon: "upload", action: :add, as_button: true, data: { action: "click->file-gallery#openUpload" }) %>
+    <% end %>
+
+    <% component.with_slideover_slot(title: "File Details") do %>
+      <div class="px-4 sm:px-6 pt-4 pb-16 space-y-6" id="file-gallery-slideover-content">
+        <p class="text-sm text-gray-500">Select a file to view details</p>
+      </div>
+    <% end %>
+
+    <% if @file_categories.any? %>
+      <% filter_items = @file_categories.map { |c| { label: c.name, value: c.slug } } %>
+      <% filter_items << { label: "Uncategorized", value: "uncategorized" } %>
+      <%= render Panda::Core::Admin::FilterPillsComponent.new(
+        items: filter_items,
+        url_helper: ->(value) { value ? admin_files_path(category: value) : admin_files_path },
+        active_value: @active_category
+      ) %>
+    <% end %>
+
+    <div class="pb-24">
+      <%= render Panda::Core::Admin::FileGalleryComponent.new(files: @files, blob_categories: @blob_categories) %>
+    </div>
+  <% end %>
+
+  <%# Upload slideover - managed by file-gallery controller %>
+  <div class="hidden fixed inset-0 bg-gray-500/75 transition-opacity duration-500 ease-in-out dark:bg-gray-900/50 z-40"
+       data-file-gallery-target="uploadBackdrop"
+       data-action="click->file-gallery#closeUpload"></div>
+
+  <div class="hidden ml-auto block size-full max-w-md transform fixed right-0 top-0 h-full z-50"
+       data-file-gallery-target="uploadPanel">
+    <div class="relative flex h-full flex-col bg-white shadow-xl dark:bg-gray-800">
+      <div class="bg-gradient-admin px-4 py-6 sm:px-6">
+        <div class="flex items-center justify-between">
+          <h2 class="text-base font-semibold text-white">Upload File</h2>
+          <button type="button" data-action="click->file-gallery#closeUpload"
+            class="inline-flex items-center gap-1 rounded-full bg-white/10 px-2 py-1 text-xs text-white/80 hover:text-white cursor-pointer">
+            <span>Close</span>
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-y-auto">
+        <div class="px-4 sm:px-6 pt-4 pb-16 space-y-6">
+          <%= panda_form_with url: admin_files_path, scope: :file_upload do |f| %>
+            <%= f.file_field :file, label: "File", accept: "*/*", file_types_display: "All file types", max_size: "50MB" %>
+            <%= f.select :file_category_id,
+              options_for_select(@file_categories.map { |c| [c.name, c.id] }),
+              { label: "Category", prompt: "Select a category" },
+              { required: true } %>
+            <%= render Panda::Core::Admin::FormFooterComponent.new(submit_text: "Upload") %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/panda/core/admin/import_sessions/column_map.html.erb

@@ -0,0 +1,43 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "Map Columns", level: 1) %>
+
+  <%= render Panda::Core::Admin::PanelComponent.new do %>
+    <p class="text-sm text-gray-600 mb-6">
+      Match each column from your file to a field in your data. Leave unmatched columns as "Skip" to ignore them.
+    </p>
+
+    <%= form_tag update_mapping_admin_import_session_path(@import_session), method: :patch, class: "space-y-4" do %>
+      <div class="divide-y divide-gray-100">
+        <% @headers.each do |header| %>
+          <div class="flex items-center gap-4 py-3">
+            <div class="w-1/3">
+              <span class="text-sm font-medium text-gray-900"><%= header %></span>
+            </div>
+            <div class="flex items-center text-gray-400">
+              <i class="fa-solid fa-arrow-right"></i>
+            </div>
+            <div class="flex-1">
+              <select name="mapping[<%= header %>]"
+                      class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary">
+                <option value="">— Skip —</option>
+                <% @field_options.each do |field| %>
+                  <% auto_match = header.parameterize(separator: "_") == field.name.to_s %>
+                  <option value="<%= field.name %>" <%= "selected" if auto_match %>>
+                    <%= field.label %><%= " (required)" if field.required %>
+                  </option>
+                <% end %>
+              </select>
+            </div>
+          </div>
+        <% end %>
+      </div>
+
+      <div class="flex items-center gap-3 pt-4">
+        <button type="submit" class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 transition cursor-pointer">
+          <i class="fa-solid fa-eye mr-2"></i> Preview Import
+        </button>
+        <a href="javascript:history.back()" class="text-sm text-gray-500 hover:text-gray-700">Back</a>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/panda/core/admin/import_sessions/index.html.erb

@@ -0,0 +1,48 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "Import History", level: 1) %>
+
+  <% if @import_sessions.any? %>
+    <%= render Panda::Core::Admin::TableComponent.new(term: "import", rows: @import_sessions, icon: "fa-solid fa-file-import") do |table| %>
+      <% table.column("Type", width: "20%") do |session| %>
+        <span class="font-medium"><%= session.importable_type %></span>
+      <% end %>
+
+      <% table.column("Status", width: "15%") do |session| %>
+        <% case session.status %>
+        <% when "complete" %>
+          <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Complete</span>
+        <% when "failed" %>
+          <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20">Failed</span>
+        <% when "importing" %>
+          <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20">Importing</span>
+        <% else %>
+          <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"><%= session.status.capitalize %></span>
+        <% end %>
+      <% end %>
+
+      <% table.column("Records", width: "15%") do |session| %>
+        <span class="text-sm text-gray-500"><%= session.imported_count %> / <%= session.total_rows %></span>
+      <% end %>
+
+      <% table.column("By", width: "20%") do |session| %>
+        <span class="text-sm text-gray-500"><%= session.user.name %></span>
+      <% end %>
+
+      <% table.column("Date", width: "20%") do |session| %>
+        <span class="text-sm text-gray-500"><%= session.created_at.strftime("%d %b %Y %H:%M") %></span>
+      <% end %>
+
+      <% table.column("", width: "10%") do |session| %>
+        <%= link_to admin_import_session_path(session), class: "text-sm text-primary hover:text-primary/80" do %>
+          View <i class="fa-solid fa-arrow-right ml-1"></i>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= render Panda::Core::Admin::EmptyStateComponent.new(
+      title: "No imports yet",
+      description: "Imports will appear here once you've imported data.",
+      icon: "fa-solid fa-file-import"
+    ) %>
+  <% end %>
+<% end %>

data/app/views/panda/core/admin/import_sessions/new.html.erb

@@ -0,0 +1,37 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "Import #{@importable_type.pluralize}", level: 1) %>
+
+  <%= render Panda::Core::Admin::PanelComponent.new do %>
+    <%= form_tag admin_import_sessions_path, multipart: true, class: "space-y-6" do %>
+      <%= hidden_field_tag :importable_type, @importable_type %>
+
+      <% if flash[:error] %>
+        <div class="rounded-lg bg-red-50 p-4 mb-4">
+          <div class="flex items-center gap-2">
+            <i class="fa-solid fa-circle-exclamation text-red-600"></i>
+            <p class="text-sm font-medium text-red-800"><%= flash[:error] %></p>
+          </div>
+        </div>
+      <% end %>
+
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Upload file</label>
+        <input type="file" name="import_file" accept=".csv,.tsv,.xlsx,.xls" required
+               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
+                      file:rounded-lg file:border-0 file:text-sm file:font-medium
+                      file:bg-primary/10 file:text-primary hover:file:bg-primary/20
+                      file:cursor-pointer">
+        <p class="mt-2 text-sm text-gray-500">
+          Supported formats: CSV, TSV, or XLSX. The first row should contain column headers.
+        </p>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <button type="submit" class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 transition cursor-pointer">
+          <i class="fa-solid fa-upload mr-2"></i> Upload & Continue
+        </button>
+        <a href="javascript:history.back()" class="text-sm text-gray-500 hover:text-gray-700">Cancel</a>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>