oversee 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: af99387ad6126bddd510d80a2fd929a776c48ef101e61a3ecfd93c1f8106fa87
-  data.tar.gz: 1d8f34bc6c2fd6225b00edf30b833b4ba6bf52ced03c4c5b16be9a33162ad1a7
+  metadata.gz: c31a8c277449dfaec238f66cfc8e404a64c51dff4beef1a944fee85c5935991c
+  data.tar.gz: f3fcd62d4ff3184f5b9f97273c2269e986b5f03736a9961440aca242b38a1292
 SHA512:
-  metadata.gz: 577e608656e45f6797397728ec9820cd39854eccffa550d7d60b3735581f8480817a3d4ce235c49bcceab3b9394b06356637ec17c3c2808f2549158ad7a32ea1
-  data.tar.gz: 4ef646cc6bef74b8ffccfbd97c796bc147d6f9a144ff5f4068630235e1967ff6fe6f9b4e08bfcdb899c49bdbe106e8a37cbde59603377edf2fd7c8866c115cbc
+  metadata.gz: ad42840ab6b72667e5e16853cea4d9028fc1356fd4ff2ec7d3909b6102c2fc80dca9287245ad4ab62021181c238beae371f77b473f1f9464bf0b1162a29946c5
+  data.tar.gz: 229f928f44cfe6d6535cd8ef6682472a9f5ecf59e29bc65714ed71e1c6147ab48b582e5c065fc1e9233d5e536155e16d8750a1fc92f3e74bd97e3720cbc58e42

data/app/assets/config/oversee_manifest.js

@@ -0,0 +1,2 @@
+//= link oversee/application.js
+//= link_tree ../../javascript/oversee/controllers .js

data/app/components/oversee/dashboard/filters.rb

@@ -8,29 +8,33 @@ class Oversee::Dashboard::Filters < Oversee::Base
   end
 
   def view_template(&)
-    div(class: "border-b p-4") do
-      div(class: "flex items-center justify-between") do
-        div(class: "flex items-center gap-2") do
-          if show_action_section?
-            button(class:"rounded-full bg-gray-100 inline-flex gap-2 items-center text-xs px-4 py-2 font-medium hover:bg-gray-200") do
-              render Phlex::Icons::Iconoir::FilterAlt.new(class: "size-3")
-              plain "Filters"
-            end
-          end
-          if false
-            a(class:"rounded-full bg-gray-100 inline-flex gap-2 items-center text-xs px-4 py-2 font-medium hover:bg-gray-200") do
-              render Phlex::Icons::Iconoir::XMark.new(class: "size-4 text-gray-500")
-              plain "Clear sorting"
-            end
+    div(class: "flex items-center justify-between") do
+      div(class: "flex items-center gap-2") do
+        if show_action_section?
+          button(class:"rounded-full bg-gray-100 inline-flex gap-2 items-center text-xs px-4 py-2 font-medium hover:bg-gray-200") do
+            render Phlex::Icons::Iconoir::FilterAlt.new(class: "size-3")
+            plain "Filters"
           end
         end
-        div(class: "flex items-center gap-4") do
-          form(action: "", class: "flex items-center gap-2") do
-            input(type: :search, name: :query, class: "flex bg-gray-100 min-w-80 h-10 items-center pl-4 py-2 placeholder:text-gray-500 rounded-sm text-sm", placeholder: search_placeholder, value: @params[:query])
-            button(class: "size-10 inline-flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition-colors") { render Phlex::Icons::Iconoir::Search.new(class: "size-4 text-gray-600") }
+        if false
+          a(class:"rounded-full bg-gray-100 inline-flex gap-2 items-center text-xs px-4 py-2 font-medium hover:bg-gray-200") do
+            render Phlex::Icons::Iconoir::XMark.new(class: "size-4 text-gray-500")
+            plain "Clear sorting"
           end
         end
       end
+      div(class: "flex items-center gap-4") do
+        form(action: "", class: "flex items-center gap-2") do
+          input(
+            type: :search,
+            name: :query,
+            value: @params[:query],
+            placeholder: search_placeholder,
+            class: "flex bg-gray-100 min-w-64 w-64 focus:w-96 transition-all h-10 items-center pl-4 py-2 placeholder:text-gray-500 rounded-sm text-sm"
+          )
+          button(class: "size-10 inline-flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition-colors") { render Phlex::Icons::Iconoir::Search.new(class: "size-4 text-gray-600") }
+        end
+      end
     end
   end
 
@@ -46,7 +50,7 @@ class Oversee::Dashboard::Filters < Oversee::Base
   end
 
   def search_placeholder
-    context = Search.new(collection: nil, resource_class: @params[:resource_class_name].constantize)
+    context = Oversee::Search.new(collection: nil, resource_class: @params[:resource_class_name].constantize)
     attr = context.default_searchable_attribute
 
     "Search by #{attr}"

data/app/components/oversee/dashboard/header.rb

@@ -1,4 +1,9 @@
 class Oversee::Dashboard::Header < Oversee::Base
+  attr_reader :title
+  attr_reader :subtitle
+  attr_reader :return_path
+  attr_reader :show_back_button
+
   def initialize(title: nil, subtitle: nil, return_path: nil, show_back_button: true)
     @title = title || "Dashboard"
     @subtitle = subtitle || "Manage your account"
@@ -7,31 +12,42 @@ class Oversee::Dashboard::Header < Oversee::Base
   end
 
   def view_template(&)
-    div(id: "dashboard_header", class: "p-8 border-b flex items-center justify-between") do
-      div(class: "flex items-center gap-4") do
-        back_button
-        div do
-          h1(class: "text-xl text-gray-800") { @title }
-          p(class: "text-sm text-gray-600") { @subtitle }
-        end
-      end
-      div(class: "flex items-center gap-2") do
-        yield if block_given?
+
+    div(class: "min-h-10 flex items-center justify-between") do
+      if block_given?
+        yield(self)
+      else
+        left
+        right
       end
     end
   end
 
+  def left(&)
+    div(class: "flex items-center gap-2") do
+      back_button if show_back_button
+      h3(class: "text-lg font-medium text-gray-900") { title } if title.present?
+      yield if block_given?
+    end
+  end
+
+  def right(&)
+    div(class: "flex items-center gap-4", &)
+  end
+
+  def separator
+    render Phlex::Icons::Iconoir::Slash.new(class: "size-4 text-gray-300", stroke_width: 1.75)
+  end
+
   private
 
   def back_button
-    if @show_back_button
-      a(
-        href: return_button_path,
-        class: "size-10 inline-flex items-center justify-center bg-gray-50 text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-colors",
-        data: { controller: "back", action: "back#navigate", turbo_action: "replace" }
-      ) do
-        render Phlex::Icons::Iconoir::ArrowLeft.new(class: "size-4 text-gray-900")
-      end
+    a(
+      href: return_button_path,
+      class: "mr-2 size-8 inline-flex items-center justify-center bg-gray-50 text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-colors",
+      data: { controller: "back", action: "back#navigate", turbo_action: "replace" }
+    ) do
+      render Phlex::Icons::Iconoir::ArrowLeft.new(class: "size-3", stroke_width: 2.5)
     end
   end
 

data/app/components/oversee/dashboard/index.rb

@@ -1,23 +1,35 @@
 # frozen_string_literal: true
 
 class Oversee::Dashboard::Index < Oversee::Base
+
+  def around_template
+    render Oversee::Layout::Application.new { super }
+  end
+
   def view_template
-    div(class: "p-8") do
-      div(class: "flex items-center justify-between") do
-        div do
-          p(class: "text-xs uppercase font-medium text-gray-400") { "Dashboard" }
-          h1(class: "text-xl") { "Welcome" }
+    div(class: "flex items-center justify-between") do
+      h1(class: "text-lg font-medium text-gray-900") { "Dashboard" }
+      h1(class: "text-sm font-medium text-gray-500") { Date.current.to_fs(:long) }
+    end
+
+    if Oversee.card_class_names.present?
+      div(class: "grid grid-cols-4 gap-4") do
+        Oversee.card_class_names.each do |card_name|
+          render Oversee::Card.new(card_name: card_name)
         end
       end
     end
 
-    if Oversee.card_class_names.present?
-      div(class: "p-8") do
-        div(class: "grid grid-cols-4 gap-4") do
-          Oversee.card_class_names.each do |card_name|
-            render Oversee::Card.new(card_name: card_name)
+    hr(class: "my-4")
+
+    div(class: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4") do
+      Oversee.application_resource_names.sort.each do |resource_class_name|
+          a(href: helpers.resources_path(resource_class_name:), class: "w-full bg-gray-100/75 block hover:bg-gray-50 p-4 truncate") do
+            div(class: "flex items-center justify-center size-8 bg-white") do
+              render Phlex::Icons::Iconoir::Folder.new(class: "size-4 text-gray-400")
+            end
+            p(class: "mt-4 font-medium text-gray-700") { resource_class_name }
           end
-        end
       end
     end
   end

data/app/components/oversee/dashboard/javascript.rb

@@ -1,9 +1,9 @@
 class Oversee::Dashboard::Javascript < Phlex::HTML
+  include Phlex::Rails::Helpers::JavascriptImportmapTags
+
   def view_template
-    script(async: true, src:"https://unpkg.com/es-module-shims/dist/es-module-shims.js")
-    script(type: "importmap", data_turbo_track: "reload") do
-      raw %({"imports":{"@hotwired/stimulus":"https://unpkg.com/@hotwired/stimulus/dist/stimulus.js","@hotwired/turbo":"https://unpkg.com/@hotwired/turbo","@hotwired/turbo-rails":"https://unpkg.com/@hotwired/turbo-rails"}}).html_safe
-    end
+    script(async: true, src:"https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js")
+    javascript_importmap_tags("application", importmap: Oversee.importmap)
     script(type: "module") { raw %(import * as Turbo from "@hotwired/turbo-rails").html_safe }
   end
 end

data/app/components/oversee/dashboard/pagination.rb

@@ -9,7 +9,7 @@ class Oversee::Dashboard::Pagination < Oversee::Base
   end
 
   def view_template
-    div(class:"p-4 border-t flex items-center justify-between") do
+    div(class:"mt-4 flex items-center justify-between") do
 
       div(class: "font-regular text-xs") do
         raw pagy_info(@pagy).html_safe

data/app/components/oversee/dashboard/sidebar.rb

@@ -21,8 +21,45 @@ class Oversee::Dashboard::Sidebar < Oversee::Base
         end
       end
 
+      if Rails.env.development?
+        hr(class: "my-4 -mx-4")
+        details(
+          id: "links-menu",
+          class: "group",
+          # open: true,
+          data: {
+            controller: "sidebar--state",
+            action: "sidebar--state#persist",
+            sidebar__state_target: "expandable"
+          }
+        ) do
+          summary(class: "flex items-center justify-between cursor-pointer") do
+            p(class: "text-[0.7rem] uppercase text-gray-400 font-medium") { "Links" }
+            render Phlex::Icons::Iconoir::NavArrowDown.new(class: "size-4 text-gray-400 transform transition-transform group-open:rotate-180 group-hover:text-blue-500")
+          end
+          ul(class: "mt-2 text-sm text-gray-700 overflow-x-hidden") do
+            li do
+              a(href: "https://github.com/primevise/oversee", target: "_blank", class: "flex items-center gap-2 hover:bg-gray-50 p-2 truncate") do
+                render Phlex::Icons::Iconoir::ArrowUpRightSquare.new(class: "size-4 text-gray-400")
+                span { "Repository" }
+              end
+            end
+          end
+        end
+      end
+
       hr(class: "my-4 -mx-4")
-      details(open: true, class: "group") do
+
+      details(
+        id: "resources-menu",
+        class: "group",
+        # open: true,
+        data: {
+          controller: "sidebar--state",
+          action: "sidebar--state#persist",
+          sidebar__state_target: "expandable"
+        }
+      ) do
         summary(class: "flex items-center justify-between cursor-pointer") do
           p(class: "text-[0.7rem] uppercase text-gray-400 font-medium") { "Resources" }
           render Phlex::Icons::Iconoir::NavArrowDown.new(class: "size-4 text-gray-400 transform transition-transform group-open:rotate-180 group-hover:text-blue-500")

data/app/components/oversee/dashboard/tailwind.rb

@@ -1,11 +1,40 @@
 class Oversee::Dashboard::Tailwind < Phlex::HTML
   def view_template
-    script(src: "https://cdn.tailwindcss.com?plugins=typography")
+    script(src: "https://cdn.tailwindcss.com/3.4.15?plugins=typography@0.5.15")
     style(type:"text/tailwindcss") do
       raw pagy_css.html_safe
+      raw trix_css.html_safe
     end
   end
 
+  def trix_css
+    <<~CSS
+      trix-editor {
+        @apply rounded-b rounded-t-none border border-t-0 border-gray-200 !ring-0;
+      }
+
+      .trix-active {
+        @apply !bg-gray-100 !text-blue-500;
+      }
+
+      .trix-button-row {
+        @apply overflow-hidden rounded-t border;
+      }
+
+      .trix-button {
+        @apply !relative !inline-flex !h-7 !items-center !justify-center border-0 !border-b-0 !border-l-0 !px-7 !py-4;
+      }
+
+      .trix-button::before {
+        @apply !top-1.5 !h-5;
+      }
+
+      .trix-button-group {
+        @apply !mb-0 rounded-b-none !border-0 border-gray-200;
+      }
+    CSS
+  end
+
   def pagy_css
     <<~CSS
       .pagy {

data/app/components/oversee/field/display.rb

@@ -1,29 +1,38 @@
 class Oversee::Field::Display < Oversee::Base
-  def initialize(resource:, key: nil, value: nil, datatype: :string, interactive: true)
+
+  attr_reader :resource
+  attr_reader :key
+  attr_reader :value
+  attr_reader :datatype
+
+  def initialize(resource:, key: nil, value: nil, datatype: :string, **options)
     @resource = resource
     @key = key
     @value = value
     @datatype = datatype
-    @interactive = interactive
+    @options = options
   end
 
   def view_template
-    wrapper_tag(
-      id: dom_id(@resource, @key),
-      href: helpers.resource_input_field_path(resource_class_name: resource_class_name, key: @key),
+    html_tag(
+      id: dom_id(resource, key),
+      href: helpers.resource_input_path(resource_class_name:, key:, datatype:),
       class: "bg-gray-100 h-10 flex items-center px-4 py-2 hover:bg-gray-200 transition-colors w-full cursor-pointer",
-      data: { turbo_stream: true }) do
-      render Oversee::Field::Value.new(key: @key, value: @resource.send(@key), datatype: @datatype)
+      data: { turbo_stream: true }
+    ) do
+      render Oversee::Field::Value.new(key:, value:, datatype:, **@options)
     end
   end
 
   private
 
   def resource_class_name
-    @resource.class.name
+    @resource_class_name ||= @resource.class.name
   end
 
-  def wrapper_tag(...)
-    @interactive ? a(...) : div(...)
+  def html_tag(...)
+    edittable? ? a(...) : div(...)
   end
+
+  def edittable? = @options[:edittable] || true
 end

data/app/components/oversee/field/form.rb

@@ -1,21 +1,22 @@
 class Oversee::Field::Form < Oversee::Base
   include Phlex::Rails::Helpers::FormWith
 
-  def initialize(resource:, key: nil, value: nil, datatype: :string, method: :patch)
+  def initialize(resource:, key: nil, value: nil, datatype: :string, method: :patch, **options)
     @resource = resource
     @key = key
     @value = value
     @datatype = datatype
     @method = method
+    @options = options
   end
 
   def view_template
     form_with(id: dom_id(@resource, @key), model: @resource, url: helpers.update_resource_path(resource_class_name: resource_class_name, id: @resource.id), method: @method, class: "flex items-center w-full gap-4") do |form|
       input type: :hidden, id: "oversee_key", name: "oversee_key", value: @key.to_s
       input type: :hidden, id: "oversee_datatype", name: "oversee_datatype", value: @datatype
-      render Oversee::Field::Input.new(key: @key, value: @value, datatype: @datatype)
+      render Oversee::Field::Input.new(key: @key, value: @value, datatype: @datatype, **@options)
       button(class:"h-9 bg-gray-900 hover:bg-gray-700 text-white inline-flex items-center cursor-pointer gap-2 px-4 rounded-full text-xs font-medium") {
-        save_icon
+        render Phlex::Icons::Iconoir::Check.new(class: "size-4")
         plain "Save"
       }
     end
@@ -26,24 +27,4 @@ class Oversee::Field::Form < Oversee::Base
   def resource_class_name
     @resource.class.name
   end
-
-  def save_icon
-    svg(
-      stroke_width: "2.5",
-      viewbox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      class: "size-4",
-      color: "currentColor"
-    ) do |s|
-      s.path(
-        d: "M5 13L9 17L19 7",
-        stroke: "currentColor",
-        stroke_width: "2.5",
-        stroke_linecap: "round",
-        stroke_linejoin: "round"
-      )
-    end
-  end
-
 end

data/app/components/oversee/field/input/belongs_to.rb

@@ -0,0 +1,22 @@
+class Oversee::Field::Input::BelongsTo < Oversee::Field::Input
+  def initialize(key:, value:, **options)
+    @key = key
+    @value = value
+  end
+
+  def view_template
+    input type: "text", id: field_id, name: field_name, value: @value, class: "flex border px-4 py-2 text-sm w-full rounded-sm"
+
+    # select(id: field_id, name: field_name, class: "flex w-full border rounded-sm px-4 py-2 text-sm") do
+
+    #   option(value: 1, selected: @value) { "True" }
+    #   option(value: 0, selected: !@value) { "False" }
+    # end
+  end
+
+  private
+
+  def select_values
+
+  end
+end

data/app/components/oversee/field/input/boolean.rb

@@ -1,4 +1,4 @@
-class Oversee::Field::Input::Boolean < Phlex::HTML
+class Oversee::Field::Input::Boolean < Oversee::Field::Input
   def initialize(key:, value:)
     @key = key
     @value = value
@@ -10,14 +10,4 @@ class Oversee::Field::Input::Boolean < Phlex::HTML
       option(value: 0, selected: !@value) { "False" }
     end
   end
-
-  private
-
-  def field_id
-    "resource_#{@key.to_s}"
-  end
-
-  def field_name
-    "resource[#{@key.to_s}]"
-  end
 end

data/app/components/oversee/field/input/datetime.rb

@@ -1,4 +1,4 @@
-class Oversee::Field::Input::Datetime < Phlex::HTML
+class Oversee::Field::Input::Datetime < Oversee::Field::Input
   def initialize(key:, value:)
     @key = key
     @value = value
@@ -7,14 +7,4 @@ class Oversee::Field::Input::Datetime < Phlex::HTML
   def view_template
     input type: "datetime-local", id: field_id, name: field_name, value: @value&.strftime("%Y-%m-%dT%T"), class: "flex w-full border rounded-sm px-4 py-2 text-sm"
   end
-
-  private
-
-  def field_id
-    "resource_#{@key.to_s}"
-  end
-
-  def field_name
-    "resource[#{@key.to_s}]"
-  end
 end

data/app/components/oversee/field/input/integer.rb

@@ -1,4 +1,4 @@
-class Oversee::Field::Input::Integer < Phlex::HTML
+class Oversee::Field::Input::Integer < Oversee::Field::Input
   def initialize(key:, value:)
     @key = key
     @value = value
@@ -7,14 +7,4 @@ class Oversee::Field::Input::Integer < Phlex::HTML
   def view_template
     input type: "number", id: field_id, name: field_name, value: @value, class: "flex w-full border rounded-sm px-4 py-2 text-sm"
   end
-
-  private
-
-  def field_id
-    "resource_#{@key.to_s}"
-  end
-
-  def field_name
-    "resource[#{@key.to_s}]"
-  end
 end

data/app/components/oversee/field/input/rich_text.rb

@@ -0,0 +1,18 @@
+class Oversee::Field::Input::RichText < Oversee::Field::Input
+  register_element :trix_editor
+
+  attr_reader :key
+  attr_reader :value
+
+  def initialize(key:, value:)
+    @key = key
+    @value = value
+  end
+
+  def view_template
+    div do
+      input(type: "hidden", id: field_id, name: field_name, value:)
+      trix_editor(id: "#{field_id}_trix_editor", input: field_id)
+    end
+  end
+end

data/app/components/oversee/field/input/string.rb

@@ -1,4 +1,4 @@
-class Oversee::Field::Input::String < Phlex::HTML
+class Oversee::Field::Input::String < Oversee::Field::Input
   def initialize(key:, value:)
     @key = key
     @value = value
@@ -7,14 +7,4 @@ class Oversee::Field::Input::String < Phlex::HTML
   def view_template
     input type: "text", id: field_id, name: field_name, value: @value, class: "flex border px-4 py-2 text-sm w-full rounded-sm"
   end
-
-  private
-
-  def field_id
-    "resource_#{@key.to_s}"
-  end
-
-  def field_name
-    "resource[#{@key.to_s}]"
-  end
 end

data/app/components/oversee/field/input.rb

@@ -1,21 +1,24 @@
 class Oversee::Field::Input < Oversee::Base
   MAP = {
-    string: Oversee::Field::Input::String,
+    belongs_to: Oversee::Field::Input::BelongsTo,
     boolean: Oversee::Field::Input::Boolean,
-    integer: Oversee::Field::Input::Integer,
     datetime: Oversee::Field::Input::Datetime,
+    enum: Oversee::Field::Input::String,
+    integer: Oversee::Field::Input::Integer,
+    rich_text: Oversee::Field::Input::RichText,
+    string: Oversee::Field::Input::String,
     text: Oversee::Field::Input::String,
-    enum: Oversee::Field::Input::String
   }
 
-  def initialize(key: nil, value: nil, datatype: :string)
+  def initialize(key: nil, value: nil, datatype: :string, **options)
     @key = key
     @value = value
     @datatype = datatype
+    @options = options
   end
 
   def view_template
-    render component_class.new(key: @key, value: @value)
+    render component_class.new(key: @key, value: @value, **@options)
   end
 
   private
@@ -23,4 +26,9 @@ class Oversee::Field::Input < Oversee::Base
   def component_class
     MAP[@datatype.to_sym] || Oversee::Field::Input::String
   end
+
+  private
+
+  def field_id = "resource_#{@key.to_s}"
+  def field_name = "resource[#{@key.to_s}]"
 end

data/app/components/oversee/field/label.rb

@@ -2,6 +2,7 @@ class Oversee::Field::Label < Oversee::Base
   ICON_MAP = {
     string: Phlex::Icons::Iconoir::Text,
     text: Phlex::Icons::Iconoir::TextSquare,
+    rich_text: Phlex::Icons::Iconoir::TextSquare,
     integer: Phlex::Icons::Iconoir::Number0Square,
     datetime: Phlex::Icons::Iconoir::Calendar,
     boolean: Phlex::Icons::Iconoir::SwitchOn,
@@ -14,11 +15,11 @@ class Oversee::Field::Label < Oversee::Base
   end
 
   def view_template
-    div(class:"inline-flex items-center space-x-2") do
+    div(id: "#{@key}_label", class:"inline-flex items-center space-x-2") do
       div(class: "size-5 bg-gray-100 inline-flex items-center justify-center") do
         render ICON_MAP[@datatype] ? ICON_MAP[@datatype].new(class: "size-3") : ICON_MAP[:data].new(class: "size-3")
       end
-      label(class: "uppercase text-xs text-gray-š00 font-medium block") { @key.to_s.humanize(keep_id_suffix: true) }
+      label(class: "uppercase text-xs text-gray-700 font-medium block cursor-auto") { @key.to_s.humanize(keep_id_suffix: true) }
     end
   end
 end

data/app/components/oversee/field/value/belongs_to.rb

@@ -0,0 +1,21 @@
+class Oversee::Field::Value::BelongsTo < Phlex::HTML
+  def initialize(key: nil, value: nil, **options)
+    @key = key
+    @value = value
+    @options = options
+  end
+
+  def view_template
+    p(title: @value, class:"inline-flex items-center gap-1") do
+      if display_key?
+        span { @key.humanize }
+        span {"|"}
+      end
+      span { @value }
+    end
+  end
+
+  private
+
+  def display_key? = !!@options[:display_key]
+end

data/app/components/oversee/field/value/datetime.rb

@@ -4,6 +4,6 @@ class Oversee::Field::Value::Datetime < Phlex::HTML
   end
 
   def view_template
-    time(title: @value) { @value&.to_fs(:long) || "N/A" }
+    time(title: @value.to_s) { @value&.to_fs(:long) || "N/A" }
   end
 end

data/app/components/oversee/field/value/rich_text.rb

@@ -0,0 +1,9 @@
+class Oversee::Field::Value::RichText < Phlex::HTML
+  def initialize(datatype: :string, key: nil, value: nil, kind: :value)
+    @value = value
+  end
+
+  def view_template
+    p(class: "truncate") { @value }
+  end
+end