oversee 0.1.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eda2b577791e666d84d3b2af260c06604489d84936c8ff907f51573f5441e7e7
-  data.tar.gz: 83ca5ac7da8e9b5f66bc19523e2b78875634e669b0acd7e34bad2b2dcb76887d
+  metadata.gz: c31a8c277449dfaec238f66cfc8e404a64c51dff4beef1a944fee85c5935991c
+  data.tar.gz: f3fcd62d4ff3184f5b9f97273c2269e986b5f03736a9961440aca242b38a1292
 SHA512:
-  metadata.gz: 0a7fc59d7b8f317e15927ec883017b374f5216aeaa5208bdb29d67f3cbf03dd944e57b7a90e5eac161cde60257276def41ebfa5e34399f3f41db43e47c3e63d8
-  data.tar.gz: a441505a216cf3df44dc9a58be3e135a5741564b3b8a51e1e486de08a53dfdfe0f640dcc2126813c1dd3d32d21deb806480f52a03b8deab54a6713af3e33b6ad
+  metadata.gz: ad42840ab6b72667e5e16853cea4d9028fc1356fd4ff2ec7d3909b6102c2fc80dca9287245ad4ab62021181c238beae371f77b473f1f9464bf0b1162a29946c5
+  data.tar.gz: 229f928f44cfe6d6535cd8ef6682472a9f5ecf59e29bc65714ed71e1c6147ab48b582e5c065fc1e9233d5e536155e16d8750a1fc92f3e74bd97e3720cbc58e42

data/README.md

@@ -1,40 +1,79 @@
-[![Gem Version](https://badge.fury.io/rb/oversee.svg)](https://badge.fury.io/rb/oversee)
 
-# 👓 Oversee
+# Oversee
+
 Plug & play admin dashboard for Rails applications.
 
+
+[![Gem Version](https://badge.fury.io/rb/oversee.svg)](https://badge.fury.io/rb/oversee)
+
+---
+
+### Features
+
+- Minimal, if any, configuration needed
+- Tailored and pleasant user interface
+- Geared for performance
+
+---
+
+![Oversee Screenshot](docs/images/screenshot.png)
+
 Developed by [Primevise](https://primevise.com)
 
-> [!NOTE]  
+> [!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
+
+#### Add gem
+
+Simply add the gem to your Gemfile by running the following command
 
 ```bash
 $ bundle add oversee
 ```
 
+> [!TIP]
+> Currently, we don't release new gem versions too often due to the fragile nature of the gem. However, you can use the edge version of the gem by pointing directly to the git repository.
+> ```ruby
+> gem "oversee", git: "https://github.com/primevise/oversee", branch: :main
+> ```
 
-or add this line to your application's Gemfile:
+---
 
-```ruby
-gem "oversee"
-```
+#### Mount it on your application
 
-And then run:
-```bash
-$ bundle
+After you have the gem installed, you can then mount the engine in your `config/routes.rb`:
+
+```ruby
+Rails.application.routes.draw do
+  mount Oversee::Engine => "/oversee"
+end
 ```
 
-## Contributing
-TBA
+Ideally, you'd want to limit access to the dashboard to only authorized users.
 
 ## Notable mentions
-This gem is inspired by other open source admin dashboards. A big thank you goes to these projects:
+
+This gem would not be possible without the work of others. A big thank you goes to these projects:
 
 - [madmin](https://github.com/excid3/madmin)
 - [Avo](https://github.com/avo-hq/avo)
+- [Iconoir](https://github.com/iconoir-icons/iconoir)
+
+## Who uses Oversee?
+
+- [Mintis](https://mintis.app)
+- [No Logo X](https://nologox.com)
+- [Release Server](https://releaseserver.com)
+- [College Life Work](https://work.collegelife.co)
+
+Do you use Oversee in your project? Let us know!
+
+## Contributing
+
+TBA
 
 ## License
+
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/config/oversee_manifest.js

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

data/app/components/oversee/{application_component.rb → base.rb}

@@ -1,4 +1,4 @@
-class Oversee::ApplicationComponent < Phlex::HTML
+class Oversee::Base < Phlex::HTML
   include Phlex::Rails::Helpers::DOMID
   include Phlex::Rails::Helpers::Routes
   include Phlex::Rails::Helpers::LinkTo

data/app/components/oversee/card.rb

@@ -0,0 +1,13 @@
+class Oversee::Card < Phlex::HTML
+  def initialize(card_name:)
+    @card_name = card_name
+    @card = card_name.constantize.new
+  end
+
+  def view_template
+    div(class: "bg-gray-100 rounded-md p-4") do
+      p(class: "text-xs uppercase text-gray-600") { @card.label }
+      h4(class: "mt-2 text-gray-900 text-2xl") { @card.value }
+    end
+  end
+end

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

@@ -0,0 +1,58 @@
+class Oversee::Dashboard::Filters < Oversee::Base
+  def initialize(params: nil)
+
+    @params = params
+
+    puts "params: #{params}"
+    puts "sortless_path: #{sortless_path}"
+  end
+
+  def view_template(&)
+    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
+        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
+
+  private
+
+  def show_action_section?
+    Rails.env.development? || @params[:experimental] == "true"
+  end
+
+  def sortless_path
+    sortless_query_params = @params.except(:sort_attribute, :sort_direction, :controller, :action)
+    # helpers.resources_path(sortless_query_params)
+  end
+
+  def search_placeholder
+    context = Oversee::Search.new(collection: nil, resource_class: @params[:resource_class_name].constantize)
+    attr = context.default_searchable_attribute
+
+    "Search by #{attr}"
+  end
+ end

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

@@ -0,0 +1,57 @@
+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"
+    @return_path = return_path
+    @show_back_button = show_back_button
+  end
+
+  def view_template(&)
+
+    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
+    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
+
+  def return_button_path
+    @return_path || root_path
+  end
+end

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

@@ -0,0 +1,36 @@
+# 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: "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
+
+    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

@@ -0,0 +1,9 @@
+class Oversee::Dashboard::Javascript < Phlex::HTML
+  include Phlex::Rails::Helpers::JavascriptImportmapTags
+
+  def view_template
+    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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+class Oversee::Dashboard::Pagination < Oversee::Base
+  include Pagy::Frontend
+  include Phlex::Rails::Helpers::Request
+
+  def initialize(pagy:, params:)
+    @pagy = pagy
+    @params = params
+  end
+
+  def view_template
+    div(class:"mt-4 flex items-center justify-between") do
+
+      div(class: "font-regular text-xs") do
+        raw pagy_info(@pagy).html_safe
+      end
+
+      div(class: "flex items-center gap-4") do
+        raw pagy_nav(@pagy).html_safe
+      end
+    end
+  end
+end

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

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+class Oversee::Dashboard::Sidebar < Oversee::Base
+  def view_template
+    div(class: "bg-white p-4 rounded-lg") do
+      button(class: "mb-4 ") { collapse_icon } unless true
+
+      p(class: "text-[0.7rem] uppercase text-gray-400 font-medium mb-2") { "Menu" }
+      ul(class: "text-sm text-gray-700") do
+        li do
+          a(href: root_path, class:"flex items-center gap-2 hover:bg-gray-50 p-2") do
+            render Phlex::Icons::Iconoir::LayoutLeft.new(class: "size-4 text-gray-400")
+            span { "Dashboard" }
+          end
+        end
+        li do
+          a(href: helpers.main_app.root_path, class: "flex items-center gap-2 hover:bg-gray-50 p-2 rounded-lg") do
+            render Phlex::Icons::Iconoir::HomeAltSlimHoriz.new(class: "size-4 text-gray-400")
+            span { "Return to app" }
+          end
+        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(
+        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")
+        end
+        ul(class: "mt-2 text-sm text-gray-700 overflow-x-hidden") do
+          Oversee.application_resource_names.sort.each do |resource_class_name|
+            li do
+              a(href: helpers.resources_path(resource_class_name:), class: "flex items-center gap-2 hover:bg-gray-50 p-2 truncate") do
+                render Phlex::Icons::Iconoir::Folder.new(class: "size-4 text-gray-400")
+                span { resource_class_name }
+              end
+            end
+          end
+        end
+      end
+
+      hr(class: "my-4 -mx-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
+end

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

@@ -0,0 +1,62 @@
+class Oversee::Dashboard::Tailwind < Phlex::HTML
+  def view_template
+    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 {
+        @apply flex gap-2 items-center text-sm text-gray-500;
+        a:not(.gap) {
+          @apply inline-flex items-center justify-center h-8 min-w-8 font-normal;
+          &:hover { @apply bg-gray-100; }
+          &:not([href]) { /* disabled links */
+            @apply text-gray-300 cursor-not-allowed;
+          }
+          &.current {
+            @apply font-semibold bg-gray-100 text-gray-900;
+          }
+        }
+
+        label {
+          @apply inline-block whitespace-nowrap bg-gray-200 px-3 py-0.5;
+          input {
+            @apply bg-gray-100 border-none rounded-md;
+          }
+        }
+      }
+    CSS
+  end
+end

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

@@ -0,0 +1,38 @@
+class Oversee::Field::Display < Oversee::Base
+
+  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
+    @options = options
+  end
+
+  def view_template
+    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:, value:, datatype:, **@options)
+    end
+  end
+
+  private
+
+  def resource_class_name
+    @resource_class_name ||= @resource.class.name
+  end
+
+  def html_tag(...)
+    edittable? ? a(...) : div(...)
+  end
+
+  def edittable? = @options[:edittable] || true
+end

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

@@ -0,0 +1,30 @@
+class Oversee::Field::Form < Oversee::Base
+  include Phlex::Rails::Helpers::FormWith
+
+  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, **@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") {
+        render Phlex::Icons::Iconoir::Check.new(class: "size-4")
+        plain "Save"
+      }
+    end
+  end
+
+  private
+
+  def resource_class_name
+    @resource.class.name
+  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

@@ -0,0 +1,13 @@
+class Oversee::Field::Input::Boolean < Oversee::Field::Input
+  def initialize(key:, value:)
+    @key = key
+    @value = value
+  end
+
+  def view_template
+    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
+end

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

@@ -0,0 +1,10 @@
+class Oversee::Field::Input::Datetime < Oversee::Field::Input
+  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: "flex w-full border rounded-sm px-4 py-2 text-sm"
+  end
+end

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

@@ -0,0 +1,10 @@
+class Oversee::Field::Input::Integer < Oversee::Field::Input
+  def initialize(key:, value:)
+    @key = key
+    @value = value
+  end
+
+  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
+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

@@ -0,0 +1,10 @@
+class Oversee::Field::Input::String < Oversee::Field::Input
+  def initialize(key:, value:)
+    @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"
+  end
+end

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

@@ -0,0 +1,34 @@
+class Oversee::Field::Input < Oversee::Base
+  MAP = {
+    belongs_to: Oversee::Field::Input::BelongsTo,
+    boolean: Oversee::Field::Input::Boolean,
+    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,
+  }
+
+  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, **@options)
+  end
+
+  private
+
+  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