panda-core 0.12.5 → 1.1.0

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

@@ -0,0 +1,51 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "Preview Import", level: 1) %>
+
+  <%= render Panda::Core::Admin::PanelComponent.new do %>
+    <p class="text-sm text-gray-600 mb-4">
+      Showing first <%= @preview_rows.size %> rows. Review the mapped data below before importing.
+    </p>
+
+    <div class="overflow-x-auto">
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead>
+          <tr>
+            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Row</th>
+            <% @mapping.each do |csv_col, field_name| %>
+              <% defn = @field_definitions.find { |d| d.name.to_s == field_name } %>
+              <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                <%= defn&.label || field_name %>
+              </th>
+            <% end %>
+            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100">
+          <% @preview_rows.each_with_index do |row, i| %>
+            <% attrs, errors = @import_session.importable_class.import_row(row, @mapping) %>
+            <tr class="<%= errors.any? ? 'bg-red-50' : '' %>">
+              <td class="px-3 py-2 text-sm text-gray-500"><%= i + 2 %></td>
+              <% @mapping.each do |csv_col, field_name| %>
+                <td class="px-3 py-2 text-sm text-gray-900"><%= row[csv_col] %></td>
+              <% end %>
+              <td class="px-3 py-2 text-sm">
+                <% if errors.any? %>
+                  <span class="text-red-600"><%= errors.join(", ") %></span>
+                <% else %>
+                  <span class="text-green-600"><i class="fa-solid fa-check"></i> OK</span>
+                <% end %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="flex items-center gap-3 mt-6">
+      <%= button_to import_admin_import_session_path(@import_session), method: :post, 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" do %>
+        <i class="fa-solid fa-file-import mr-2"></i> Start Import
+      <% end %>
+      <%= link_to "Back to mapping", column_map_admin_import_session_path(@import_session), class: "text-sm text-gray-500 hover:text-gray-700" %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,87 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "Import Results", level: 1) %>
+
+  <%= render Panda::Core::Admin::PanelComponent.new do %>
+    <%# Status badge %>
+    <div class="mb-6">
+      <% case @import_session.status %>
+      <% when "complete" %>
+        <span class="inline-flex items-center gap-1.5 rounded-full bg-green-50 px-3 py-1 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
+          <i class="fa-solid fa-check-circle"></i> Complete
+        </span>
+      <% when "importing" %>
+        <span class="inline-flex items-center gap-1.5 rounded-full bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20">
+          <i class="fa-solid fa-spinner fa-spin"></i> Importing...
+        </span>
+      <% when "failed" %>
+        <span class="inline-flex items-center gap-1.5 rounded-full bg-red-50 px-3 py-1 text-sm font-medium text-red-700 ring-1 ring-inset ring-red-600/20">
+          <i class="fa-solid fa-exclamation-circle"></i> Failed
+        </span>
+      <% end %>
+    </div>
+
+    <%# Stats %>
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
+      <div class="rounded-lg bg-gray-50 p-4">
+        <div class="text-2xl font-semibold text-gray-900"><%= @import_session.total_rows %></div>
+        <div class="text-sm text-gray-500">Total rows</div>
+      </div>
+      <div class="rounded-lg bg-green-50 p-4">
+        <div class="text-2xl font-semibold text-green-700"><%= @import_session.imported_count %></div>
+        <div class="text-sm text-green-600">Imported</div>
+      </div>
+      <div class="rounded-lg bg-red-50 p-4">
+        <div class="text-2xl font-semibold text-red-700"><%= @import_session.error_count %></div>
+        <div class="text-sm text-red-600">Errors</div>
+      </div>
+      <div class="rounded-lg bg-gray-50 p-4">
+        <div class="text-2xl font-semibold text-gray-900"><%= @import_session.skipped_count %></div>
+        <div class="text-sm text-gray-500">Skipped</div>
+      </div>
+    </div>
+
+    <%# Progress bar %>
+    <% if @import_session.importing? %>
+      <div class="mb-6">
+        <div class="flex justify-between text-sm text-gray-600 mb-1">
+          <span>Progress</span>
+          <span><%= @import_session.progress_percentage %>%</span>
+        </div>
+        <div class="w-full bg-gray-200 rounded-full h-2.5">
+          <div class="bg-primary h-2.5 rounded-full transition-all" style="width: <%= @import_session.progress_percentage %>%"></div>
+        </div>
+      </div>
+    <% end %>
+
+    <%# Errors log %>
+    <% if @import_session.errors_log.any? %>
+      <div class="mt-6">
+        <h3 class="text-sm font-medium text-gray-900 mb-3">Errors (<%= @import_session.errors_log.size %> rows)</h3>
+        <div class="max-h-64 overflow-y-auto rounded-lg border border-red-200">
+          <table class="min-w-full divide-y divide-red-100">
+            <thead class="bg-red-50">
+              <tr>
+                <th class="px-3 py-2 text-left text-xs font-medium text-red-700">Row</th>
+                <th class="px-3 py-2 text-left text-xs font-medium text-red-700">Errors</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-red-50">
+              <% @import_session.errors_log.each do |entry| %>
+                <tr>
+                  <td class="px-3 py-2 text-sm text-gray-900"><%= entry["row"] %></td>
+                  <td class="px-3 py-2 text-sm text-red-600"><%= Array(entry["errors"]).join(", ") %></td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="mt-6">
+      <a href="javascript:history.back()" class="text-sm text-gray-500 hover:text-gray-700">
+        <i class="fa-solid fa-arrow-left mr-1"></i> Back
+      </a>
+    </div>
+  <% end %>
+<% end %>

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

@@ -1,60 +1,72 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.heading(text: "My Profile", level: 1) %>
+  <% component.with_heading_slot(text: "My Profile", level: 1) %>
 
-  <%= form_with model: user,
+  <%= panda_form_with model: user,
               url: admin_my_profile_path,
               method: :patch,
               local: true,
+              html: { multipart: true },
               data: { controller: "theme-form" } do |f| %>
     <%= render Panda::Core::Admin::FormErrorComponent.new(model: user) %>
 
-    <div class="space-y-6">
-      <!-- Avatar Section -->
-      <div class="col-span-full">
-        <%= f.label :avatar, "Profile Picture", class: "block text-sm/6 font-medium text-gray-900 dark:text-white" %>
-        <div class="mt-2 flex items-center gap-x-3">
-          <% if user.avatar.attached? %>
-            <%= image_tag main_app.url_for(user.avatar), alt: user.name, class: "w-48 h-48 max-w-48 rounded-full object-cover" %>
-          <% else %>
-            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="w-48 h-48 text-gray-300 dark:text-gray-500">
+    <%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+      <% panel.with_heading_slot { "Profile Settings" } %>
+      <div class="space-y-4">
+        <!-- Avatar Section -->
+        <div class="col-span-full" data-controller="avatar-upload">
+          <span id="avatar-label" class="block text-sm/6 font-medium text-gray-900 dark:text-white">Profile Picture</span>
+          <div class="mt-2 flex items-center gap-x-3">
+            <% avatar = user.avatar_url %>
+            <img src="<%= avatar.presence || 'about:blank' %>"
+                 alt="<%= user.name %>"
+                 class="w-48 h-48 max-w-48 rounded-full object-cover<%= ' hidden' unless avatar.present? %>"
+                 data-avatar-upload-target="preview">
+            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
+                 class="w-48 h-48 text-gray-300 dark:text-gray-500<%= ' hidden' if avatar.present? %>"
+                 data-avatar-upload-target="placeholder">
               <path d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clip-rule="evenodd" fill-rule="evenodd" />
             </svg>
-          <% end %>
-          <label for="<%= f.field_id(:avatar) %>" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 cursor-pointer dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20">
-            Change
-          </label>
-          <%= f.file_field :avatar,
-              accept: "image/png,image/jpeg,image/jpg,image/gif,image/webp",
-              class: "sr-only" %>
+            <div>
+              <label for="user_avatar" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 cursor-pointer dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20">
+                Change
+              </label>
+              <% if user.avatar.respond_to?(:blob) && user.avatar.blob.present? %>
+                <% blob = user.avatar.blob %>
+                <p class="mt-2 text-xs text-gray-600 dark:text-gray-400">
+                  Current: <%= blob.filename %> (<%= number_to_human_size(blob.byte_size) %>)
+                </p>
+              <% end %>
+            </div>
+            <input type="file"
+                   id="user_avatar"
+                   name="user[avatar]"
+                   accept="image/png,image/jpeg,image/jpg,image/gif,image/webp"
+                   class="sr-only"
+                   aria-labelledby="avatar-label"
+                   data-avatar-upload-target="input"
+                   data-action="change->avatar-upload#handleFileSelect">
+          </div>
+          <!-- File info (shown when a new file is selected) -->
+          <div class="hidden mt-3 flex items-center gap-x-3 text-sm text-gray-600 dark:text-gray-400" data-avatar-upload-target="fileInfo">
+            <span data-avatar-upload-target="fileName"></span>
+            <span data-avatar-upload-target="fileSize"></span>
+            <button type="button"
+                    class="text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300 font-medium"
+                    data-action="avatar-upload#remove">
+              Remove
+            </button>
+          </div>
         </div>
-        <% if user.avatar.attached? %>
-          <p class="mt-2 text-xs text-gray-600 dark:text-gray-400">
-            Current: <%= user.avatar.filename %> (<%= number_to_human_size(user.avatar.byte_size) %>)
-          </p>
-        <% end %>
-      </div>
 
-      <div class="field">
-        <%= f.label :name %>
         <%= f.text_field :name %>
-      </div>
-
-      <div class="field">
-        <%= f.label :email %>
         <%= f.email_field :email %>
-      </div>
-
-      <div class="field">
-        <%= f.label :current_theme, "Theme" %>
         <%= f.select :current_theme,
                      options_for_select(Panda::Core.config.available_themes || [["Default", "default"], ["Sky", "sky"]], user.current_theme),
-                     {},
+                     { label: "Theme" },
                      data: { action: "change->theme-form#updateTheme" } %>
       </div>
-    </div>
+    <% end %>
 
-    <%= f.submit "Update Profile",
-        class: "btn btn-primary mt-4",
-        data: { disable_with: "Saving..." } %>
+    <%= render Panda::Core::Admin::FormFooterComponent.new(submit_text: "Update Profile") %>
   <% end %>
 <% end %>

data/app/views/panda/core/admin/my_profile/logins/show.html.erb

@@ -0,0 +1,72 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do %>
+  <%= render Panda::Core::Admin::HeadingComponent.new(level: 1, text: "Login & Security") %>
+
+  <!-- Connected Accounts -->
+  <%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+    <% panel.with_heading_slot do %>
+      <div class="flex flex-col">
+        <span>Connected Accounts</span>
+        <span class="text-sm font-normal text-white/70">Manage your OAuth authentication providers</span>
+      </div>
+    <% end %>
+    <% panel.with_body_slot do %>
+      <div class="space-y-4">
+        <% enabled_providers = Panda::Core.config.authentication_providers %>
+        <% if enabled_providers.empty? %>
+          <p class="text-sm text-gray-500">No authentication providers are currently enabled.</p>
+        <% else %>
+          <% enabled_providers.each do |provider_name, _config| %>
+            <%= render Panda::Core::Admin::MyProfile::ConnectedAccountComponent.new(
+              provider: provider_name,
+              user: user
+            ) %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+
+  <!-- Login History -->
+  <%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+    <% panel.with_heading_slot do %>
+      <div class="flex flex-col">
+        <span>Login History</span>
+        <span class="text-sm font-normal text-white/70">Recent login activity for your account</span>
+      </div>
+    <% end %>
+    <% panel.with_body_slot do %>
+      <div class="space-y-4">
+        <p class="text-sm text-gray-500">Login history tracking will be implemented in a future release.</p>
+        <!-- Future implementation:
+        - Table showing date/time, location, IP address, device/browser
+        - Filter/search capabilities
+        - Export functionality
+        -->
+      </div>
+    <% end %>
+  <% end %>
+
+  <!-- Two-Factor Authentication (Future) -->
+  <%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+    <% panel.with_heading_slot do %>
+      <div class="flex flex-col">
+        <span>Two-Factor Authentication</span>
+        <span class="text-sm font-normal text-white/70">Add an extra layer of security to your account</span>
+      </div>
+    <% end %>
+    <% panel.with_body_slot do %>
+      <div class="space-y-4">
+        <p class="text-sm text-gray-500">
+          Two-factor authentication will be available in a future release.
+          Track progress in <a href="https://github.com/tastybamboo/panda-core/issues/34" class="text-blue-600 hover:text-blue-800 underline" target="_blank">GitHub Issue #34</a>.
+        </p>
+        <!-- Future implementation:
+        - TOTP setup with QR code
+        - Backup codes generation
+        - SMS fallback option (optional)
+        - Recovery options
+        -->
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -1,37 +1 @@
-<div class="flex flex-col justify-center py-12 px-6 min-h-full text-center lg:px-8">
-  <div class="text-center sm:mx-auto sm:w-full sm:max-w-sm">
-    <% if Panda::Core.config.login_logo_path %>
-      <img src="<%= Panda::Core.config.login_logo_path %>" class="py-2 mx-auto w-auto h-32">
-    <% end %>
-    <h2 class="mt-10 mb-6 text-2xl font-bold text-center text-white">
-      <%= Panda::Core.config.login_page_title || "Sign in to your account" %>
-    </h2>
-  </div>
-  <% if @providers&.any? %>
-    <% @providers.each do |provider| %>
-      <% provider_config = Panda::Core.config.authentication_providers[provider] %>
-      <% provider_path = provider_config&.dig(:path_name) || provider %>
-      <div class="mt-4 text-center sm:mx-auto sm:w-full sm:max-w-sm">
-        <%= form_tag "#{Panda::Core.config.admin_path}/auth/#{provider_path}", method: "post", data: {turbo: false} do %>
-          <button type="submit" id="button-sign-in-<%= provider_path %>" class="inline-flex gap-x-2 items-center py-2.5 px-3.5 mx-auto mb-4 bg-white text-gray-900 rounded-md border min-w-56 border-neutral-400 hover:bg-gray-50">
-            <i class="<%= oauth_provider_non_brand?(provider) ? 'fa-solid' : 'fa-brands' %> fa-<%= oauth_provider_icon(provider) %> text-xl mr-1"></i>
-            Sign in with <%= oauth_provider_name(provider, provider_config) %>
-          </button>
-        <% end %>
-      </div>
-    <% end %>
-  <% else %>
-    <div class="rounded-md bg-yellow-50 p-4 sm:mx-auto sm:w-full sm:max-w-sm">
-      <div class="flex">
-        <div class="ml-3">
-          <h3 class="text-sm font-medium text-yellow-800">
-            No authentication providers configured
-          </h3>
-          <div class="mt-2 text-sm text-yellow-700">
-            <p>Please configure at least one authentication provider in your Panda Core configuration.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  <% end %>
-</div>
+<%= render Panda::Core::Admin::LoginFormComponent.new(providers: @providers) %>

data/app/views/panda/core/admin/shared/_breadcrumbs.html.erb

@@ -1,18 +1 @@
-<% breadcrumb_styles = "text-black/60 hover:text-black/80" %>
-
-<nav aria-label="Breadcrumb" id="panda-breadcrumbs" class="px-4 w-full sm:px-6 py-2.5">
-  <ol role="list">
-    <li class="inline-block">
-      <a href="<%= Panda::Core.config.admin_path %>" class="<%= breadcrumb_styles %>">
-        <i class="fa fa-solid fa-house fa-fw inline-block w-4 text-center"></i>
-        <span class="sr-only">Home</span>
-      </a>
-    </li>
-    <% breadcrumbs.each do |crumb| %>
-      <li class="inline-block">
-        <i class="fa-solid fa-chevron-right fa-fw inline-block w-4 text-center font-light <%= breadcrumb_styles %> px-2"></i>
-        <a href="<%= crumb.path %>" class="text-sm font-normal <%= breadcrumb_styles %>"><%= crumb.name %></a>
-      </li>
-    <% end %>
-  </ol>
-</nav>
+<%= render Panda::Core::Admin::BreadcrumbsComponent.new(breadcrumbs: breadcrumbs) %>

data/app/views/panda/core/admin/shared/_sidebar.html.erb

@@ -1,99 +1 @@
-<nav class="flex flex-col flex-1">
-  <ul role="list" class="flex flex-col flex-1">
-    <a class="block p-0 mt-4 mb-4 ml-2 text-xl font-medium text-white"><%= Panda::Core.config.admin_title || "Panda Admin" %></a>
-    <%
-      # Get navigation items in original order for display
-      nav_items = Panda::Core.config.admin_navigation_items&.call(current_user) || []
-
-      # Helper to recursively collect all paths from nav items
-      def collect_paths(items)
-        items.flat_map do |item|
-          paths = item[:path] ? [item[:path]] : []
-          paths += collect_paths(item[:children] || [])
-          paths
-        end
-      end
-
-      # Find the most specific matching path by checking longest paths first
-      all_paths = collect_paths(nav_items)
-      active_path = all_paths
-        .sort_by { |path| -path.length }
-        .find { |path| request.path == path || request.path.starts_with?(path + "/") }
-    %>
-    <% nav_items.each_with_index do |item, index| %>
-      <li>
-        <%
-          has_children = item[:children].present?
-
-          # For items with children, check if any child is active
-          if has_children
-            is_active = item[:children].any? do |child|
-              child[:path] && (request.path == child[:path] || request.path.starts_with?(child[:path] + "/"))
-            end
-          else
-            is_active = item[:path] == active_path
-          end
-        %>
-
-        <% if has_children %>
-          <div class="space-y-1" data-controller="navigation-toggle">
-            <button type="button"
-                    data-navigation-toggle-target="button"
-                    data-action="click->navigation-toggle#toggle"
-                    aria-controls="sub-menu-<%= index %>"
-                    aria-expanded="false"
-                    class="<%= is_active ? 'bg-primary-500 text-white' : 'text-white hover:bg-primary-500/60' %> transition-all group flex items-center w-full gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal">
-              <span class="text-center w-6"><i class="<%= item[:icon] %> text-xl fa-fw"></i></span>
-              <span class="flex-1 text-left"><%= item[:label] %></span>
-              <i class="fa-solid fa-chevron-right text-xs transition-transform duration-150 ease-in-out"
-                 data-navigation-toggle-target="icon"></i>
-            </button>
-            <div id="sub-menu-<%= index %>"
-                 class="space-y-1 hidden"
-                 style="display: none;"
-                 data-navigation-toggle-target="menu">
-              <% item[:children].each do |child| %>
-                <%
-                  child_is_active = child[:path] && (request.path == child[:path] || request.path.starts_with?(child[:path] + "/"))
-                %>
-                <%= link_to child[:path], class: "#{child_is_active ? 'bg-primary-500 text-white' : 'text-white hover:bg-primary-500/60'} group flex items-center w-full py-2 pr-2 pl-11 rounded-md text-sm font-normal transition-all" do %>
-                  <%= child[:label] %>
-                <% end %>
-              <% end %>
-            </div>
-          </div>
-        <% else %>
-          <%= link_to item[:path], class: "#{is_active ? "bg-primary-500 text-white relative flex items-center transition-all py-3 px-2 mb-2 rounded-md group gap-x-3 text-base leading-6 font-normal" : "text-white hover:bg-primary-500/60 transition-all group flex items-center gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal"}" do %>
-            <span class="text-center w-6"><i class="<%= item[:icon] %> text-xl fa-fw"></i></span>
-            <span><%= item[:label] %></span>
-          <% end %>
-        <% end %>
-      </li>
-    <% end %>
-    <li>
-      <%= button_to panda_core.admin_logout_path, method: :delete, id: "logout-link", data: { turbo: false }, class: "text-white hover:bg-primary-500/60 transition-all group flex items-center gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal w-full" do %>
-        <span class="text-center w-6"><i class="text-xl fa-solid fa-door-open fa-fw"></i></span>
-        <span>Logout</span>
-      <% end %>
-    </li>
-    <li class="mt-auto">
-      <%
-        # Check if we're in the my_profile section
-        is_my_profile_active = request.path.starts_with?("#{Panda::Core.config.admin_path}/my_profile")
-      %>
-      <%= link_to panda_core.admin_my_profile_path, class: "#{is_my_profile_active ? 'bg-primary-500 text-white' : 'text-white hover:bg-primary-500/60'} transition-all group flex items-center gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal w-full", title: "My Profile" do %>
-        <% if current_user.avatar.attached? %>
-          <span class="text-center w-6"><%= image_tag main_app.url_for(current_user.avatar), alt: current_user.name, class: "w-auto h-7 rounded-full object-cover" %></span>
-        <% elsif !current_user.image_url.to_s.empty? %>
-          <span class="text-center w-6"><img src="<%= current_user.image_url %>" class="w-auto h-7 rounded-full"></span>
-        <% else %>
-          <span class="text-center w-6"><i class="text-xl fa-solid fa-circle-user fa-fw"></i></span>
-        <% end %>
-        <span><%= current_user.name %></span>
-      <% end %>
-    </li>
-    <li class="px-2 py-3">
-      <span class="text-xs text-white">Panda Core v<%= Panda::Core::VERSION %></span>
-    </li>
-  </ul>
-</nav>
+<%= render Panda::Core::Admin::SidebarComponent.new(user: current_user) %>

data/app/views/panda/core/admin/shared/_slideover.html.erb

@@ -3,9 +3,9 @@
   <div class="fixed inset-0 flex">
     <div class="relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
       <div class="absolute top-0 right-0 -mr-12 pt-2">
-        <button type="button" class="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
-          <span class="sr-only">Close sidebar</span>
-          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+        <button type="button" class="ml-1 flex items-center gap-1 rounded-full bg-white/10 px-2 py-1 text-xs text-white/80 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+          <span>Close</span>
+          <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>

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

@@ -0,0 +1,21 @@
+<%= render Panda::Core::Admin::PanelComponent.new do %>
+  <%= panda_form_with(model: tag, url: tag.persisted? ? admin_tag_path(tag) : admin_tags_path) do |f| %>
+    <div class="space-y-4">
+      <%= f.text_field :name, label: "Name" %>
+
+      <div>
+        <%= f.label :colour, "Colour" %>
+        <div class="flex items-center gap-3 mt-1">
+          <input type="color" name="tag[colour]" value="<%= tag.colour || '#6b7280' %>"
+                 class="h-10 w-14 rounded border border-gray-300 cursor-pointer">
+          <span class="text-sm text-gray-500">Choose a colour for the tag badge</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-6 flex items-center gap-3">
+      <%= f.submit tag.persisted? ? "Update Tag" : "Create Tag", 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" %>
+      <%= link_to "Cancel", admin_tags_path, class: "text-sm text-gray-500 hover:text-gray-700" %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,4 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "Edit Tag", level: 1) %>
+  <%= render "form", tag: @tag %>
+<% end %>

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

@@ -0,0 +1,41 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "Tags", level: 1) do %>
+    <%= link_to new_admin_tag_path, class: "inline-flex items-center gap-1.5 rounded-lg bg-primary px-3.5 py-2 text-sm font-medium text-white hover:bg-primary/90 transition" do %>
+      <i class="fa-solid fa-plus"></i> New Tag
+    <% end %>
+  <% end %>
+
+  <% if @tags.any? %>
+    <%= render Panda::Core::Admin::TableComponent.new(term: "tag", rows: @tags, icon: "fa-solid fa-tag") do |table| %>
+      <% table.column("Tag", width: "40%") do |tag| %>
+        <div class="flex items-center gap-2">
+          <span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: <%= tag.display_colour %>"></span>
+          <span class="font-medium"><%= tag.name %></span>
+        </div>
+      <% end %>
+
+      <% table.column("Used", width: "20%") do |tag| %>
+        <span class="text-sm text-gray-500"><%= pluralize(tag.taggings_count, "record") %></span>
+      <% end %>
+
+      <% table.column("", width: "40%") do |tag| %>
+        <div class="flex justify-end gap-2">
+          <%= link_to edit_admin_tag_path(tag), class: "inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700" do %>
+            <i class="fa-solid fa-pen-to-square"></i> Edit
+          <% end %>
+          <%= button_to admin_tag_path(tag), method: :delete, class: "inline-flex items-center gap-1 text-sm text-red-500 hover:text-red-700", data: {turbo_confirm: "Delete tag \"#{tag.name}\"?"} do %>
+            <i class="fa-solid fa-trash"></i> Delete
+          <% end %>
+        </div>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= render Panda::Core::Admin::EmptyStateComponent.new(
+      title: "No tags yet",
+      description: "Tags help you organise and filter your records.",
+      icon: "fa-solid fa-tag",
+      action_text: "Create your first tag",
+      action_path: new_admin_tag_path
+    ) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,4 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading_slot(text: "New Tag", level: 1) %>
+  <%= render "form", tag: @tag %>
+<% end %>