panda-cms 0.7.0

data/app/models/panda/cms/user.rb

@@ -0,0 +1,31 @@
+module Panda
+  module CMS
+    class User < ApplicationRecord
+      validates :firstname, presence: true
+      validates :lastname, presence: true
+      validates :email, presence: true, uniqueness: true
+
+      before_save :downcase_email
+
+      scope :admin, -> { where(admin: true) }
+
+      def is_admin?
+        admin
+      end
+
+      def name
+        "#{firstname} #{lastname}"
+      end
+
+      def self.for_select_list(scope = :all, order = {firstname: :asc, lastname: :asc})
+        Panda::CMS::User.send(scope).order(order).map { |u| [u.name, u.id] }
+      end
+
+      private
+
+      def downcase_email
+        self.email = email.to_s.downcase
+      end
+    end
+  end
+end

data/app/models/panda/cms/version.rb

@@ -0,0 +1,8 @@
+module Panda
+  module CMS
+    class Version < ApplicationRecord
+      include PaperTrail::VersionConcern
+      self.abstract_class = true
+    end
+  end
+end

data/app/models/panda/cms/visit.rb

@@ -0,0 +1,9 @@
+module Panda
+  module CMS
+    class Visit < ApplicationRecord
+      belongs_to :page, class_name: "Panda::CMS::Page", foreign_key: :page_id, optional: true
+      belongs_to :user, class_name: "Panda::CMS::User", foreign_key: :user_id, optional: true
+      belongs_to :redirect, class_name: "Panda::CMS::Redirect", foreign_key: :redirect_id, optional: true
+    end
+  end
+end

data/app/services/panda/cms/html_to_editor_js_converter.rb

@@ -0,0 +1,200 @@
+module Panda
+  module CMS
+    class HtmlToEditorJsConverter
+      class ConversionError < StandardError; end
+
+      def self.convert(html)
+        return {} if html.blank?
+
+        # If it's already in EditorJS format, return as is
+        return html if html.is_a?(Hash) && (html["blocks"].present? || html[:blocks].present?)
+
+        begin
+          # Parse the HTML content
+          doc = Nokogiri::HTML.fragment(html.to_s)
+          raise ConversionError, "Failed to parse HTML content" unless doc
+
+          blocks = []
+          current_text = ""
+
+          doc.children.each do |node|
+            case node.name
+            when "h1", "h2", "h3", "h4", "h5", "h6"
+              # Add any accumulated text as a paragraph before the header
+              if current_text.present?
+                blocks << create_paragraph_block(current_text)
+                current_text = ""
+              end
+
+              blocks << {
+                "type" => "header",
+                "data" => {
+                  "text" => node.text.strip,
+                  "level" => node.name[1].to_i
+                }
+              }
+            when "p", "div"
+              # Add any accumulated text first
+              if current_text.present?
+                blocks << create_paragraph_block(current_text)
+                current_text = ""
+              end
+
+              if node.name == "div"
+                # Process div children separately
+                node.children.each do |child|
+                  case child.name
+                  when "h1", "h2", "h3", "h4", "h5", "h6"
+                    blocks << {
+                      "type" => "header",
+                      "data" => {
+                        "text" => child.text.strip,
+                        "level" => child.name[1].to_i
+                      }
+                    }
+                  when "p"
+                    text = process_inline_elements(child)
+                    paragraphs = text.split(/<br\s*\/?>\s*<br\s*\/?>/).map(&:strip)
+                    paragraphs.each do |paragraph|
+                      blocks << create_paragraph_block(paragraph) if paragraph.present?
+                    end
+                  when "ul", "ol"
+                    items = child.css("li").map { |li| process_inline_elements(li) }
+                    next if items.empty?
+
+                    blocks << {
+                      "type" => "list",
+                      "data" => {
+                        "style" => (child.name == "ul") ? "unordered" : "ordered",
+                        "items" => items
+                      }
+                    }
+                  when "blockquote"
+                    blocks << {
+                      "type" => "quote",
+                      "data" => {
+                        "text" => process_inline_elements(child),
+                        "caption" => "",
+                        "alignment" => "left"
+                      }
+                    }
+                  when "text"
+                    text = child.text.strip
+                    current_text += text if text.present?
+                  end
+                end
+              else
+                # Handle p with nested content
+                text = process_inline_elements(node)
+                paragraphs = text.split(/<br\s*\/?>\s*<br\s*\/?>/).map(&:strip)
+                paragraphs.each do |paragraph|
+                  blocks << create_paragraph_block(paragraph) if paragraph.present?
+                end
+              end
+            when "br"
+              current_text += "\n\n"
+            when "text"
+              text = node.text.strip
+              current_text += text if text.present?
+            when "ul", "ol"
+              # Add any accumulated text first
+              if current_text.present?
+                blocks << create_paragraph_block(current_text)
+                current_text = ""
+              end
+
+              items = node.css("li").map { |li| process_inline_elements(li) }
+              next if items.empty?
+
+              blocks << {
+                "type" => "list",
+                "data" => {
+                  "style" => (node.name == "ul") ? "unordered" : "ordered",
+                  "items" => items
+                }
+              }
+            when "blockquote"
+              # Add any accumulated text first
+              if current_text.present?
+                blocks << create_paragraph_block(current_text)
+                current_text = ""
+              end
+
+              blocks << {
+                "type" => "quote",
+                "data" => {
+                  "text" => process_inline_elements(node),
+                  "caption" => "",
+                  "alignment" => "left"
+                }
+              }
+            end
+          end
+
+          # Add any remaining text as a final paragraph
+          if current_text.present?
+            # Split any remaining text on double line breaks
+            paragraphs = current_text.split(/\n\n+/).map(&:strip)
+            paragraphs.each do |paragraph|
+              blocks << create_paragraph_block(paragraph) if paragraph.present?
+            end
+          end
+
+          raise ConversionError, "No valid content blocks found" if blocks.empty?
+
+          {
+            "time" => Time.current.to_i * 1000,
+            "blocks" => blocks,
+            "version" => "2.28.2"
+          }
+        rescue Nokogiri::SyntaxError => e
+          raise ConversionError, "Invalid HTML syntax: #{e.message}"
+        rescue => e
+          raise ConversionError, "Conversion failed: #{e.message}"
+        end
+      end
+
+      def self.create_paragraph_block(text)
+        {
+          "type" => "paragraph",
+          "data" => {
+            "text" => text.strip
+          }
+        }
+      end
+
+      def self.process_inline_elements(node)
+        result = ""
+        node.children.each do |child|
+          case child.name
+          when "br"
+            result += "<br>"
+          when "text"
+            result += child.text
+          when "strong", "b"
+            result += "<b>#{child.text}</b>"
+          when "em", "i"
+            result += "<i>#{child.text}</i>"
+          when "a"
+            href = child["href"]
+            text = child.text.strip
+            # Handle email links specially
+            if href&.start_with?("mailto:")
+              email = href.sub("mailto:", "")
+              result += "<a href=\"mailto:#{email}\">#{text}</a>"
+            else
+              result += "<a href=\"#{href}\">#{text}</a>"
+            end
+          else
+            result += if child.text?
+              child.text
+            else
+              child.to_html
+            end
+          end
+        end
+        result.strip
+      end
+    end
+  end
+end

data/app/views/active_storage/blobs/blobs/_blob.html.erb

@@ -0,0 +1,14 @@
+<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
+  <% if blob.representable? %>
+    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
+  <% end %>
+
+  <figcaption class="attachment__caption">
+    <% if caption = blob.try(:caption) %>
+      <%= caption %>
+    <% else %>
+      <span class="attachment__name"><%= blob.filename %></span>
+      <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
+    <% end %>
+  </figcaption>
+</figure>

data/app/views/layouts/action_text/contents/_content.html.erb

@@ -0,0 +1,3 @@
+<div class="trix-content">
+  <%= yield -%>
+</div>

data/app/views/layouts/panda/cms/application.html.erb

@@ -0,0 +1,41 @@
+<%= render "panda/cms/shared/header", html_class: "h-full bg-white" %>
+<div class="flex h-full" id="panda-container">
+  <div class="absolute top-0 w-full lg:flex lg:fixed lg:inset-y-0 lg:z-50 lg:flex-col lg:w-72">
+    <div class="flex overflow-y-auto flex-col gap-y-5 px-4 pb-4 max-h-16 bg-gradient-to-br lg:max-h-full grow from-dark to-mid" data-transition-enter="transition-all ease-in-out duration-300" data-transition-enter-from="m-h-16" data-transition-enter-to="max-h-full" data-transition-leave="transition-all ease-in-out duration-300" data-transition-leave-from="max-h-full" data-transition-leave-to="max-h-16">
+      <%= render "panda/cms/admin/shared/sidebar" %>
+    </div>
+  </div>
+  <div class="flex flex-col flex-1 mt-16 ml-0 lg:mt-0 lg:ml-72" id="panda-inner-container" <% if content_for :sidebar %> data-controller="toggle" data-action="keydown.esc->modal#close" tabindex="-1"<% end %>>
+  <section id="panda-main" class="flex flex-row h-full">
+    <div class="flex-1 h-full" id="panda-cms-primary-content">
+      <%= render "panda/cms/admin/shared/breadcrumbs" %>
+      <%= yield %>
+    </div>
+    <% if content_for :sidebar %>
+      <div data-toggle-target="toggleable" class="hidden flex absolute right-0 flex-col h-full bg-white divide-y divide-gray-200 shadow-xl basis-3/12"
+            data-transition-enter="transform transition ease-in-out duration-500"
+            data-transition-enter-from="translate-x-full"
+            data-transition-enter-to="translate-x-0"
+            data-transition-leave="transform transition ease-in-out duration-500"
+            data-transition-leave-from="translate-x-full"
+            data-transition-leave-to="translate-x-0"
+            id="slideover">
+        <div class="overflow-y-auto flex-1 h-0">
+          <div class="py-3 px-4 mb-4 bg-black">
+            <div class="flex justify-between items-center">
+              <h2 class="text-base font-semibold leading-6 text-white" id="slideover-title"><i class="mr-2 fa-light fa-gear"></i> <%= yield :sidebar_title %> </h2>
+              <a href="#" data-action="click->toggle#toggle touch->toggle#toggle"><i class="font-bold text-white fa-regular fa-xmark right"></i></a>
+            </div>
+          </div>
+          <div class="flex flex-col flex-1 justify-between">
+            <div class="px-4 space-y-6">
+              <%= yield :sidebar %>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </section>
+</div>
+</div>
+<%= render "panda/cms/shared/footer" %>

data/app/views/layouts/panda/cms/public.html.erb

@@ -0,0 +1,3 @@
+<%= render "panda/cms/shared/header", html_class: "h-full bg-gradient-to-br from-dark to-mid" %>
+  <%= yield %>
+<%= render "panda/cms/shared/footer" %>

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

@@ -0,0 +1,12 @@
+<div class="" data-controller="dashboard">
+  <%= render Panda::CMS::Admin::ContainerComponent.new do |container| %>
+    <% container.with_heading(text: "Dashboard", level: 1) do |heading| %>
+      <% heading.with_button(action: :add, text: "Add Page", link: new_admin_page_path) %>
+    <% end %>
+    <dl class="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-3">
+      <%= render Panda::CMS::Admin::StatisticsComponent.new(metric: "Views Today", value: Panda::CMS::Visit.group_by_day(:visited_at, last: 1).count.values.first) %>
+      <%= render Panda::CMS::Admin::StatisticsComponent.new(metric: "Views Last Week", value: Panda::CMS::Visit.group_by_week(:visited_at, last: 1).count.values.first) %>
+      <%= render Panda::CMS::Admin::StatisticsComponent.new(metric: "Views Last Month", value: Panda::CMS::Visit.group_by_month(:visited_at, last: 1).count.values.first) %>
+    </dl>
+  <% end %>
+</div>

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

@@ -0,0 +1,124 @@
+<%= render Panda::CMS::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Files", level: 1) %>
+
+  <% component.with_slideover(title: "File Details") do %>
+    <div class="pt-4 pb-16 space-y-6">
+      <div>
+        <div class="block overflow-hidden w-full rounded-lg aspect-h-7 aspect-w-10">
+          <img src="https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80" alt="" class="object-cover">
+        </div>
+        <div class="flex justify-between items-start mt-4">
+          <div>
+            <h2 class="text-lg font-medium text-gray-900"><span class="sr-only">Details for </span>IMG_4985.HEIC</h2>
+            <p class="text-sm font-medium text-gray-500">3.9 MB</p>
+          </div>
+          <button type="button" class="flex relative justify-center items-center ml-4 w-8 h-8 text-gray-400 bg-white rounded-full hover:text-gray-500 hover:bg-gray-100 focus:ring-2 focus:outline-none focus:ring-panda-dark">
+            <span class="absolute -inset-1.5"></span>
+            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+            </svg>
+            <span class="sr-only">Favorite</span>
+          </button>
+        </div>
+      </div>
+      <div>
+        <h3 class="font-medium text-gray-900">Information</h3>
+        <dl class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Uploaded by</dt>
+            <dd class="text-gray-900 whitespace-nowrap">Marie Culver</dd>
+          </div>
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Created</dt>
+            <dd class="text-gray-900 whitespace-nowrap">June 8, 2020</dd>
+          </div>
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Last modified</dt>
+            <dd class="text-gray-900 whitespace-nowrap">June 8, 2020</dd>
+          </div>
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Dimensions</dt>
+            <dd class="text-gray-900 whitespace-nowrap">4032 x 3024</dd>
+          </div>
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Resolution</dt>
+            <dd class="text-gray-900 whitespace-nowrap">72 x 72</dd>
+          </div>
+        </dl>
+      </div>
+      <div>
+        <h3 class="font-medium text-gray-900">Description</h3>
+        <div class="flex justify-between items-center mt-2">
+          <p class="text-sm italic text-gray-500">Add a description to this image.</p>
+          <button type="button" class="flex relative justify-center items-center w-8 h-8 text-gray-400 bg-white rounded-full hover:text-gray-500 hover:bg-gray-100 focus:ring-2 focus:outline-none focus:ring-panda-dark">
+            <span class="absolute -inset-1.5"></span>
+            <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
+            </svg>
+            <span class="sr-only">Add description</span>
+          </button>
+        </div>
+      </div>
+      <div>
+        <h3 class="font-medium text-gray-900">Shared with</h3>
+        <ul role="list" class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
+          <li class="flex justify-between items-center py-3">
+            <div class="flex items-center">
+              <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=1024&h=1024&q=80" alt="" class="w-8 h-8 rounded-full">
+              <p class="ml-4 text-sm font-medium text-gray-900">Aimee Douglas</p>
+            </div>
+            <button type="button" class="ml-6 text-sm font-medium bg-white rounded-md focus:ring-2 focus:ring-offset-2 focus:outline-none text-panda-dark hover:text-panda-dark focus:ring-panda-dark">Remove<span class="sr-only"> Aimee Douglas</span></button>
+          </li>
+          <li class="flex justify-between items-center py-3">
+            <div class="flex items-center">
+              <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=oilqXxSqey&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="w-8 h-8 rounded-full">
+              <p class="ml-4 text-sm font-medium text-gray-900">Andrea McMillan</p>
+            </div>
+            <button type="button" class="ml-6 text-sm font-medium bg-white rounded-md focus:ring-2 focus:ring-offset-2 focus:outline-none text-panda-dark hover:text-panda-dark focus:ring-panda-dark">Remove<span class="sr-only"> Andrea McMillan</span></button>
+          </li>
+
+          <li class="flex justify-between items-center py-2">
+            <button type="button" class="flex items-center p-1 -ml-1 bg-white rounded-md focus:ring-2 focus:outline-none group focus:ring-panda-dark">
+              <span class="flex justify-center items-center w-8 h-8 text-gray-400 rounded-full border-2 border-gray-300 border-dashed">
+                <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+                </svg>
+              </span>
+              <span class="ml-4 text-sm font-medium text-panda-dark group-hover:text-panda-dark">Share</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="flex gap-x-3">
+        <button type="button" class="flex-1 py-2 px-3 text-sm font-semibold text-white bg-black rounded-md shadow-sm hover:bg-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-panda-dark">Download</button>
+        <button type="button" class="flex-1 py-2 px-3 text-sm font-semibold text-gray-900 bg-white rounded-md ring-1 ring-inset shadow-sm hover:bg-gray-50 ring-mid">Delete</button>
+      </div>
+    </div>
+  <% end %>
+
+  <% component.with_tab_bar do %>
+    <%= component.with_tab(name: "Recently Viewed", active: true) %>
+    <%= component.with_tab(name: "Recently Added") %>
+    <%= component.with_tab(name: "Favourited") %>
+  <% end %>
+
+  <section>
+    <h2 id="gallery-heading" class="sr-only">Recently viewed</h2>
+    <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+      <li class="relative">
+        <!-- Current: "ring-2 ring-panda-dark ring-offset-2", Default: "focus-within:ring-2 focus-within:ring-panda-dark focus-within:ring-offset-2 focus-within:ring-offset-gray-100" -->
+        <div class="block overflow-hidden w-full bg-gray-100 rounded-lg ring-2 ring-offset-2 ring-panda-dark aspect-w-10 aspect-h-7 group">
+          <!-- Current: "", Default: "group-hover:opacity-75" -->
+          <img src="https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80" alt="" class="object-cover pointer-events-none">
+          <button type="button" class="absolute inset-0 focus:outline-none">
+            <span class="sr-only">View details for IMG_4985.HEIC</span>
+          </button>
+        </div>
+        <p class="block mt-2 text-sm font-medium text-gray-900 pointer-events-none truncate">IMG_4985.HEIC</p>
+        <p class="block text-sm font-medium text-gray-500 pointer-events-none">3.9 MB</p>
+      </li>
+
+      <!-- More files... -->
+    </ul>
+  </section>
+<% end %>

data/app/views/panda/cms/admin/files/show.html.erb

@@ -0,0 +1,2 @@
+<h1>Admin::Files#show</h1>
+<p>Find me in app/views/panda/cms/admin/files/show.html.erb</p>

data/app/views/panda/cms/admin/forms/index.html.erb

@@ -0,0 +1,13 @@
+<%= render Panda::CMS::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Forms", level: 1) do |heading| %>
+  <% end %>
+
+  <%= render Panda::CMS::Admin::TableComponent.new(term: "form", rows: forms) do |table| %>
+    <% table.column("Name") { |form| block_link_to form.name, admin_form_path(form) } %>
+    <% table.column("Status") { |form| render Panda::CMS::Admin::TagComponent.new(status: :active) } %>
+    <% table.column("Last Submission") do |form| %>
+      <%= "#{time_ago_in_words(form.form_submissions&.last&.created_at)} ago" if form.form_submissions&.last %>
+    <% end %>
+    <% table.column("Completion Path", &:completion_path) %>
+  <% end %>
+<% end %>

data/app/views/panda/cms/admin/forms/new.html.erb

@@ -0,0 +1,15 @@
+<%= render Panda::CMS::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Add Page", level: 1) do |heading| %>
+  <% end %>
+  <%= panda_cms_form_with model: page, url: admin_pages_path, method: :post do |f| %>
+    <% options = nested_set_options(Panda::CMS::Page, page) { |i| "#{"-" * i.level} #{i.title} (#{i.path})" } %>
+    <div data-controller="slug">
+      <input type="hidden" value="<%= Panda::CMS::Current.root %>" data-slug-target="existing_root">
+      <%= f.select :parent_id, options, {}, { "data-slug-target": "input_select", "data-action": "change->slug#setPrePath" } %>
+      <%= f.text_field :title, { data: { "slug-target": "input_text", action: "focusout->slug#generatePath" } } %>
+      <%= f.text_field :path, { data: { prefix: Panda::CMS::Current.root, "slug-target": "output_text" } } %>
+      <%= f.collection_select :panda_cms_template_id, Panda::CMS::Template.available, :id, :name %>
+      <%= f.button %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/panda/cms/admin/forms/show.html.erb

@@ -0,0 +1,35 @@
+<%= render Panda::CMS::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: form.name, level: 1) do |heading| %>
+  <% end %>
+
+  <div class="overflow-x-auto -mx-4 rounded-lg ring-1 sm:mx-0 sm:rounded-lg ring-mid">
+    <table class="min-w-full divide-y divide-gray-300 border-collapse table-auto">
+      <thead>
+        <tr>
+          <% fields.each do |field, title| %>
+          <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900"><%= title %></th>
+          <% end %>
+          <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">Submitted</th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+        <% submissions.each do |submission| %>
+        <tr class="relative bg-white cursor-pointer hover:bg-gray-50">
+          <% fields.each do |field| %>
+          <td class="py-5 px-3 text-sm text-gray-500">
+            <% if field[0] == "email" || field[0] == "email_address" %>
+              <a href="mailto:<%= submission.data[field[0]] %>" class="border-b border-gray-500 hover:text-gray-900"><%= submission.data[field[0]] %></a>
+            <% else %>
+              <%= simple_format(submission.data[field[0]]) %>
+            <% end %>
+          </td>
+          <% end %>
+          <td class="py-5 px-3 text-sm text-gray-500 whitespace-nowrap">
+            <div class="text-gray-500"><%= time_ago_in_words(submission.created_at) %> ago</div>
+          </td>
+        </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

data/app/views/panda/cms/admin/menus/index.html.erb

@@ -0,0 +1,8 @@
+<%= render Panda::CMS::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Menus", level: 1) do |heading| %>
+  <% end %>
+  <%= render Panda::CMS::Admin::TableComponent.new(term: "menu", rows: menus) do |table| %>
+    <% table.column("Name") { |menu| link_to menu.name, edit_admin_menu_path(menu) } %>
+    <% table.column("Kind") { |menu| render Panda::CMS::Admin::TagComponent.new(status: :active, text: menu.kind.titleize) } %>
+  <% end %>
+<% end %>

data/app/views/panda/cms/admin/pages/edit.html.erb

@@ -0,0 +1,36 @@
+<%= render Panda::CMS::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "#{page.title}", level: 1) %>
+  <% component.with_slideover(title: "Page Details") do %>
+    <%= panda_cms_form_with model: page, url: admin_page_path, method: :put do |f| %>
+      <%= f.text_field :title, class: "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-mid placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-dark sm:leading-6 hover:pointer" %>
+      <%= f.text_field :template, value: template.name,  readonly: true, class: "read-only:bg-gray-100 block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-mid placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-dark sm:leading-6 hover:pointer" %>
+      <%= f.select :status, options_for_select([["Active", "active"], ["Draft", "draft"], ["Hidden", "hidden"], ["Archived", "archived"]], selected: page.status), {}, class: "block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-mid focus:ring-1 focus:ring-inset focus:ring-dark sm:leading-6 hover:pointer" %>
+      <%= f.submit "Save" %>
+    <% end %>
+  <% end %>
+  <div id="successMessage" class="hidden">
+    <%= render Panda::CMS::Admin::FlashMessageComponent.new(kind: "success", message: "This page was successfully updated!", temporary: false) %>
+  </div>
+  <div id="errorMessage" class="hidden">
+    <%= render Panda::CMS::Admin::FlashMessageComponent.new(kind: "error", message: "There was an error updating this page.", temporary: false) %>
+  </div>
+  <div class="grid grid-cols-2 mb-4 -mt-5">
+    <div>
+      <a class="inline-block mb-2 text-sm text-black/60" target="_blank" href="<%= @page.path %>"><%= @page.path %> <i class="ml-2 fa-solid fa-arrow-up-right-from-square"></i></a>
+    </div>
+    <div class="relative -mt-5">
+      <span class="absolute right-0"><%= render Panda::CMS::Admin::ButtonComponent.new(text: "Save Changes", action: :save_inactive, icon: "check", link: "#", size: :regular, id: "saveEditableButton") %></span>
+    </div>
+  </div>
+  <%= content_tag :iframe, nil,
+      src: "#{page.path}?embed_id=#{page.id}",
+      class: "p-0 m-0 w-full h-full border border-slate-200",
+      style: "min-height: 500px; width: 100%; height: 100%;",
+      id: "editablePageFrame",
+      data: {
+        controller: "editor-iframe",
+        editor_iframe_page_id_value: @page.id,
+        editor_iframe_admin_path_value: "#{admin_dashboard_url}",
+        editor_iframe_autosave_value: false
+      } %>
+<% end %>

data/app/views/panda/cms/admin/pages/index.html.erb

@@ -0,0 +1,22 @@
+<%= render Panda::CMS::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Pages", level: 1) do |heading| %>
+    <% heading.with_button(action: :add, text: "Add Page", link: new_admin_page_path) %>
+  <% end %>
+
+  <% if root_page %>
+    <%= render Panda::CMS::Admin::TableComponent.new(term: "page", rows: root_page.self_and_descendants) do |table| %>
+      <% table.column("Name") do |page| %>
+        <div class="<%= table_indent(page) %>">
+          <%= link_to page.title, edit_admin_page_path(page), class: "block h-full w-full" %>
+          <span class="block text-xs text-black/60"><%= page.path %></span>
+        </div>
+      <% end %>
+      <% table.column("Status") { |page| render Panda::CMS::Admin::TagComponent.new(status: page.status) } %>
+      <% table.column("Last Updated") { |page| render Panda::CMS::Admin::UserActivityComponent.new(whodunnit_to: page)} %>
+    <% end %>
+  <% else %>
+    <div class="p-6 bg-error/10 text-error rounded-lg">
+      <p class="text-base">No homepage (at <code>/</code>) found. Please create a homepage to start building your site.</p>
+    </div>
+  <% end %>
+<% end %>

data/app/views/panda/cms/admin/pages/new.html.erb

@@ -0,0 +1,15 @@
+<%= render Panda::CMS::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Add Page", level: 1) do |heading| %>
+  <% end %>
+  <%= panda_cms_form_with model: page, url: admin_pages_path, method: :post do |f| %>
+    <% options = nested_set_options(Panda::CMS::Page, page) { |i| "#{"-" * i.level} #{i.title} (#{i.path})" } %>
+    <div data-controller="slug">
+      <input type="hidden" value="<%= Panda::CMS::Current.root %>" data-slug-target="existing_root">
+      <%= f.select :parent_id, options, {}, { "data-slug-target": "input_select", "data-action": "change->slug#setPrePath" } %>
+      <%= f.text_field :title, { data: { "slug-target": "input_text", action: "focusout->slug#generatePath" } } %>
+      <%= f.text_field :path, { meta: t(".path.meta"), data: { prefix: Panda::CMS::Current.root, "slug-target": "output_text" } } %>
+      <%= f.collection_select :panda_cms_template_id, Panda::CMS::Template.available, :id, :name %>
+      <%= f.button "Create Page" %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/panda/cms/admin/pages/show.html.erb

@@ -0,0 +1 @@
+Show page