oversee 0.0.1 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1afb6e8a272250deb0cfd34142f7bf2b69fa0821c94de917613bef0b7f7b818f
-  data.tar.gz: 3f5fbcfa55ecc3697e98e2073cde72e2c083efe3d4c4040f597597167e1bd264
+  metadata.gz: eda2b577791e666d84d3b2af260c06604489d84936c8ff907f51573f5441e7e7
+  data.tar.gz: 83ca5ac7da8e9b5f66bc19523e2b78875634e669b0acd7e34bad2b2dcb76887d
 SHA512:
-  metadata.gz: c09214f0ae7aac99a224fa358658b073250ad87c03ff9cd5d28d09fed6a611e3eb28150a58c0ff9ee324423055edea2b9e3d529af9a6183e993e17f29c4e2782
-  data.tar.gz: ae3ceed82a37946a7c4005512c6dc74964a86ba4d7f0945c61baf77bdade783099da4fa13a306f796945c9e86515bfe29a79347a6268bc43a7cac741a6232890
+  metadata.gz: 0a7fc59d7b8f317e15927ec883017b374f5216aeaa5208bdb29d67f3cbf03dd944e57b7a90e5eac161cde60257276def41ebfa5e34399f3f41db43e47c3e63d8
+  data.tar.gz: a441505a216cf3df44dc9a58be3e135a5741564b3b8a51e1e486de08a53dfdfe0f640dcc2126813c1dd3d32d21deb806480f52a03b8deab54a6713af3e33b6ad

data/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Primevise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,40 @@
+[![Gem Version](https://badge.fury.io/rb/oversee.svg)](https://badge.fury.io/rb/oversee)
+
+# 👓 Oversee
+Plug & play admin dashboard for Rails applications.
+
+Developed by [Primevise](https://primevise.com)
+
+> [!NOTE]  
+> Oversee is still rather incomplete and only has the very basic features. It might significantly change and break things before a stable release.
+
+## Installation
+Add it to your application by running
+
+```bash
+$ bundle add oversee
+```
+
+
+or add this line to your application's Gemfile:
+
+```ruby
+gem "oversee"
+```
+
+And then run:
+```bash
+$ bundle
+```
+
+## Contributing
+TBA
+
+## Notable mentions
+This gem is inspired by other open source admin dashboards. A big thank you goes to these projects:
+
+- [madmin](https://github.com/excid3/madmin)
+- [Avo](https://github.com/avo-hq/avo)
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,8 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/app/assets/config/oversee_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/oversee .css

data/app/assets/stylesheets/oversee/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/components/oversee/application_component.rb

@@ -0,0 +1,5 @@
+class Oversee::ApplicationComponent < Phlex::HTML
+  include Phlex::Rails::Helpers::DOMID
+  include Phlex::Rails::Helpers::Routes
+  include Phlex::Rails::Helpers::LinkTo
+end

data/app/components/oversee/card_component.rb

@@ -0,0 +1,15 @@
+module Oversee
+  class CardComponent < Phlex::HTML
+    def initialize(card_name: )
+      @card_name = card_name
+      @card = card_name.constantize.new
+    end
+
+    def view_template
+      div(class: "bg-white rounded-md border shadow-sm p-4") do
+        p(class: "text-xs uppercase font-medium text-gray-400") { @card.label }
+        h4(class: "mt-2 text-gray-900 text-2xl") { @card.value }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+class Oversee::Dashboard::SidebarComponent < Oversee::ApplicationComponent
+  include Phlex::Rails::Helpers::LinkTo
+  include Phlex::Rails::Helpers::ButtonTo
+
+  def view_template
+    div(class: "bg-white border p-4 rounded-lg") do
+
+      p(class: "text-[0.7rem] uppercase text-gray-400 font-medium mb-2") { "Menu" }
+      ul(class: "text-sm text-gray-700") do
+        li do
+          link_to root_path,
+            class:
+              "flex items-center gap-2 hover:bg-gray-50 p-2 rounded-lg" do
+            layout_icon
+            span { "Dashboard" }
+          end
+        end
+        li do
+          link_to helpers.main_app.root_path,
+            class:
+              "flex items-center gap-2 hover:bg-gray-50 p-2 rounded-lg" do
+            main_app_icon
+            span { "Return to app" }
+          end
+        end
+      end
+
+      hr(class: "my-4")
+      p(class: "text-[0.7rem] uppercase text-gray-400 font-medium mb-2") { "Resources" }
+      ul(class: "text-sm text-gray-700") do
+        ApplicationRecord.descendants.map(&:to_s).sort.each do |resource_name|
+          li do
+            link_to helpers.resources_path(resource: resource_name), class: "flex items-center gap-2 hover:bg-gray-50 p-2 rounded-lg" do
+              folder_icon
+              span { resource_name }
+            end
+          end
+        end
+      end
+
+      hr(class: "my-4")
+      p(class: "text-xs text-gray-500") do
+        plain("Powered by ")
+        a(
+            href: "https://github.com/primevise/oversee",
+            class: "text-blue-500 hover:underline",
+            target: "_blank"
+          ) { "Oversee" }
+      end
+    end
+  end
+
+  private
+
+  def folder_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewbox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "h-4 w-4 text-gray-400"
+    ) do |s|
+      s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+      s.path(
+        d:
+          "M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"
+      )
+    end
+  end
+
+  def main_app_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewbox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "h-4 w-4 text-gray-400"
+    ) do |s|
+      s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+      s.path(d: "M9 21v-6a2 2 0 0 1 2 -2h2c.247 0 .484 .045 .702 .127")
+      s.path(d: "M19 12h2l-9 -9l-9 9h2v7a2 2 0 0 0 2 2h5")
+      s.path(d: "M16 22l5 -5")
+      s.path(d: "M21 21.5v-4.5h-4.5")
+    end
+  end
+
+  def layout_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewbox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "h-4 w-4 text-gray-400"
+    ) do |s|
+      s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+      s.path(
+        d:
+          "M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
+      )
+      s.path(
+        d:
+          "M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
+      )
+      s.path(
+        d:
+          "M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
+      )
+    end
+  end
+end

data/app/components/oversee/field_component.rb

@@ -0,0 +1,39 @@
+module Oversee
+  class FieldComponent < Phlex::HTML
+    # A map for components to use when rendering a value
+    VALUE_MAP = {
+      string: Oversee::Fields::Value::StringComponent,
+      boolean: Oversee::Fields::Value::BooleanComponent,
+      integer: Oversee::Fields::Value::IntegerComponent,
+      datetime: Oversee::Fields::Value::DatetimeComponent,
+      text: Oversee::Fields::Value::TextComponent,
+      enum: Oversee::Fields::Value::EnumComponent
+    }
+
+    # A map for components to use when rendering a form input field
+    INPUT_MAP ={
+      string: Oversee::Fields::Input::StringComponent,
+      boolean: Oversee::Fields::Input::StringComponent,
+      integer: Oversee::Fields::Input::IntegerComponent,
+      datetime: Oversee::Fields::Input::DatetimeComponent,
+      text: Oversee::Fields::Input::StringComponent,
+      enum: Oversee::Fields::Input::StringComponent,
+    }
+
+    MAP = {
+      value: VALUE_MAP,
+      input: INPUT_MAP,
+    }
+
+    def initialize(resource: nil, datatype: :string, kind: :value, key: nil, value: nil)
+      @kind = kind
+      @datatype = VALUE_MAP.key?(datatype) ? datatype : :text
+      @key = key
+      @value = value || nil
+    end
+
+    def view_template
+      render MAP[@kind][@datatype.to_sym].new(key: @key, value: @value)
+    end
+  end
+end

data/app/components/oversee/field_label_component.rb

@@ -0,0 +1,155 @@
+module Oversee
+  class FieldLabelComponent < Phlex::HTML
+    def initialize(datatype: :string, key: nil)
+      @datatype = datatype
+      @key = key
+    end
+
+    def view_template
+      div(class:"inline-flex items-center space-x-2") do
+        div(class: "h-5 w-5 bg-gray-100 inline-flex items-center justify-center rounded") do
+          respond_to?("#{@datatype}_icon", true) ? send("#{@datatype}_icon") : data_icon
+        end
+        p(class: "uppercase text-xs text-gray-500 font-medium") { @key.to_s.humanize }
+      end
+    end
+
+    private
+
+    def string_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "h-2.5 w-2.5",
+        viewbox: "0 0 24 24",
+        stroke_width: "2",
+        stroke: "currentColor",
+        fill: "none",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+        s.path(d: "M6 4l12 0")
+        s.path(d: "M12 4l0 16")
+      end
+    end
+
+    def integer_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "h-2.5 w-2.5",
+        viewbox: "0 0 24 24",
+        stroke_width: "2",
+        stroke: "currentColor",
+        fill: "none",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+        s.path(d: "M4 17v-10l7 10v-10")
+        s.path(d: "M15 17h5")
+        s.path(d: "M17.5 10m-2.5 0a2.5 3 0 1 0 5 0a2.5 3 0 1 0 -5 0")
+      end
+    end
+
+    def text_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "h-2.5 w-2.5",
+        viewbox: "0 0 24 24",
+        stroke_width: "2",
+        stroke: "currentColor",
+        fill: "none",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+        s.path(d: "M6 4l12 0")
+        s.path(d: "M12 4l0 16")
+      end
+    end
+
+    def boolean_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "h-2.5 w-2.5",
+        viewbox: "0 0 24 24",
+        stroke_width: "2",
+        stroke: "currentColor",
+        fill: "none",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+        s.path(d: "M8 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0")
+        s.path(
+          d:
+            "M2 6m0 6a6 6 0 0 1 6 -6h8a6 6 0 0 1 6 6v0a6 6 0 0 1 -6 6h-8a6 6 0 0 1 -6 -6z"
+        )
+      end
+    end
+
+    def enum_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "h-2.5 w-2.5",
+        viewbox: "0 0 24 24",
+        stroke_width: "2",
+        stroke: "currentColor",
+        fill: "none",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+        s.path(
+          d:
+            "M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"
+        )
+        s.path(d: "M9 11l3 3l3 -3")
+      end
+    end
+
+    def datetime_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "h-2.5 w-2.5",
+        viewbox: "0 0 24 24",
+        stroke_width: "2",
+        stroke: "currentColor",
+        fill: "none",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+        s.path(
+          d:
+            "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"
+        )
+        s.path(d: "M16 3v4")
+        s.path(d: "M8 3v4")
+        s.path(d: "M4 11h16")
+        s.path(d: "M11 15h1")
+        s.path(d: "M12 15v3")
+      end
+    end
+
+    def data_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        class: "h-2.5 w-2.5",
+      ) do |s|
+        s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+        s.path(d: "M15 12h.01")
+        s.path(d: "M12 12h.01")
+        s.path(d: "M9 12h.01")
+        s.path(d: "M6 19a2 2 0 0 1 -2 -2v-4l-1 -1l1 -1v-4a2 2 0 0 1 2 -2")
+        s.path(d: "M18 19a2 2 0 0 0 2 -2v-4l1 -1l-1 -1v-4a2 2 0 0 0 -2 -2")
+      end
+    end
+  end
+end

data/app/components/oversee/fields/display_row_component.rb

@@ -0,0 +1,58 @@
+class Oversee::Fields::DisplayRowComponent < Phlex::HTML
+  include Phlex::Rails::Helpers::DOMID
+  include Phlex::Rails::Helpers::Routes
+
+  def initialize(key:, resource:, datatype:, value:)
+    @datatype = datatype
+    @resource = resource
+    @key = key
+    @value = value
+  end
+
+  def view_template
+    div(
+      id: dom_id(@resource, @key),
+      class:
+        "py-4 px-8 hover:bg-gray-50 group flex items-center justify-between"
+    ) do
+      div do
+        render Oversee::FieldLabelComponent.new(key: @key, datatype: @datatype)
+        div(class: "mt-2 bg-gray-100 rounded px-4 py-2 min-w-64") do
+          render Oversee::FieldComponent.new(kind: :value, datatype: @datatype, value: @resource.send(@key))
+        end
+      end
+      div do
+        a(
+          href:
+            (
+              input_field_path(
+                @resource.id,
+                resource: @resource.class,
+                key: @key
+              )
+            ),
+          data_turbo_stream: "true",
+          class:
+            "opacity-0 group-hover:opacity-100 transition h-8 w-8 rounded-md bg-white border inline-flex justify-center items-center text-gray-400 hover:text-gray-800"
+        ) do
+          svg(
+            xmlns: "http://www.w3.org/2000/svg",
+            viewbox: "0 0 16 16",
+            fill: "currentColor",
+            data_slot: "icon",
+            class: "w-4 h-4"
+          ) do |s|
+            s.path(
+              d:
+                "M13.488 2.513a1.75 1.75 0 0 0-2.475 0L6.75 6.774a2.75 2.75 0 0 0-.596.892l-.848 2.047a.75.75 0 0 0 .98.98l2.047-.848a2.75 2.75 0 0 0 .892-.596l4.261-4.262a1.75 1.75 0 0 0 0-2.474Z"
+            )
+            s.path(
+              d:
+                "M4.75 3.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V9A.75.75 0 0 1 14 9v2.25A2.75 2.75 0 0 1 11.25 14h-6.5A2.75 2.75 0 0 1 2 11.25v-6.5A2.75 2.75 0 0 1 4.75 2H7a.75.75 0 0 1 0 1.5H4.75Z"
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/oversee/fields/input/boolean_component.rb

@@ -0,0 +1,26 @@
+module Oversee
+  module Fields
+    module Input
+      class BooleanComponent < Phlex::HTML
+        def initialize(key:, value:)
+          @key = key
+          @value = value
+        end
+
+        def view_template
+          input type: "text", id: field_id, name: field_name, value: @value, class: "border rounded-md 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
+    end
+  end
+end

data/app/components/oversee/fields/input/datetime_component.rb

@@ -0,0 +1,27 @@
+
+module Oversee
+  module Fields
+    module Input
+      class DatetimeComponent < Phlex::HTML
+        def initialize(key:, value:)
+          @key = key
+          @value = value
+        end
+
+        def view_template
+          input type: "datetime-local", id: field_id, name: field_name, value: @value.strftime("%Y-%m-%dT%T"), class: "border rounded-md 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
+    end
+  end
+end

data/app/components/oversee/fields/input/integer_component.rb

@@ -0,0 +1,26 @@
+module Oversee
+  module Fields
+    module Input
+      class IntegerComponent < Phlex::HTML
+        def initialize(key:, value:)
+          @key = key
+          @value = value
+        end
+
+        def view_template
+          input type: "number", id: field_id, name: field_name, value: @value, class: "border rounded-md 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
+    end
+  end
+end

data/app/components/oversee/fields/input/string_component.rb

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

data/app/components/oversee/fields/value/boolean_component.rb

@@ -0,0 +1,44 @@
+module Oversee
+  module Fields
+    module Value
+      class BooleanComponent < Phlex::HTML
+        def initialize(key: nil, value: nil, kind: :value)
+          @value = value
+        end
+
+        def view_template
+          return p(class: "text-gray-500 text-xs"){ "—" } if @value.blank?
+          if @value
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              viewbox: "0 0 16 16",
+              fill: "currentColor",
+              data_slot: "icon",
+              class: "w-4 h-4 text-emerald-500"
+            ) do |s|
+              s.path(
+                fill_rule: "evenodd",
+                d:
+                  "M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z",
+                clip_rule: "evenodd"
+              )
+            end
+          else
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              viewbox: "0 0 16 16",
+              fill: "currentColor",
+              data_slot: "icon",
+              class: "w-4 h-4 text-red-400"
+            ) do |s|
+              s.path(
+                d:
+                  "M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/oversee/fields/value/datetime_component.rb

@@ -0,0 +1,16 @@
+module Oversee
+  module Fields
+    module Value
+      class DatetimeComponent < Phlex::HTML
+        def initialize(key: nil, value: nil, kind: :value)
+          @value = value
+        end
+
+        def view_template
+          return p(class: "text-gray-500 text-xs"){ "—" } if @value.blank?
+          p { @value&.to_fs(:short) || "N/A" }
+        end
+      end
+    end
+  end
+end