oversee 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eda2b577791e666d84d3b2af260c06604489d84936c8ff907f51573f5441e7e7
-  data.tar.gz: 83ca5ac7da8e9b5f66bc19523e2b78875634e669b0acd7e34bad2b2dcb76887d
+  metadata.gz: af99387ad6126bddd510d80a2fd929a776c48ef101e61a3ecfd93c1f8106fa87
+  data.tar.gz: 1d8f34bc6c2fd6225b00edf30b833b4ba6bf52ced03c4c5b16be9a33162ad1a7
 SHA512:
-  metadata.gz: 0a7fc59d7b8f317e15927ec883017b374f5216aeaa5208bdb29d67f3cbf03dd944e57b7a90e5eac161cde60257276def41ebfa5e34399f3f41db43e47c3e63d8
-  data.tar.gz: a441505a216cf3df44dc9a58be3e135a5741564b3b8a51e1e486de08a53dfdfe0f640dcc2126813c1dd3d32d21deb806480f52a03b8deab54a6713af3e33b6ad
+  metadata.gz: 577e608656e45f6797397728ec9820cd39854eccffa550d7d60b3735581f8480817a3d4ce235c49bcceab3b9394b06356637ec17c3c2808f2549158ad7a32ea1
+  data.tar.gz: 4ef646cc6bef74b8ffccfbd97c796bc147d6f9a144ff5f4068630235e1967ff6fe6f9b4e08bfcdb899c49bdbe106e8a37cbde59603377edf2fd7c8866c115cbc

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/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,54 @@
+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: "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
+          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") }
+          end
+        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 = 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,41 @@
+class Oversee::Dashboard::Header < Oversee::Base
+  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(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?
+      end
+    end
+  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
+    end
+  end
+
+  def return_button_path
+    @return_path || root_path
+  end
+end

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class Oversee::Dashboard::Index < Oversee::Base
+  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" }
+        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)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+class Oversee::Dashboard::Javascript < Phlex::HTML
+  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(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:"p-4 border-t 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,53 @@
+# 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
+
+      hr(class: "my-4 -mx-4")
+      details(open: true, class: "group") 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,33 @@
+class Oversee::Dashboard::Tailwind < Phlex::HTML
+  def view_template
+    script(src: "https://cdn.tailwindcss.com?plugins=typography")
+    style(type:"text/tailwindcss") do
+      raw pagy_css.html_safe
+    end
+  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,29 @@
+class Oversee::Field::Display < Oversee::Base
+  def initialize(resource:, key: nil, value: nil, datatype: :string, interactive: true)
+    @resource = resource
+    @key = key
+    @value = value
+    @datatype = datatype
+    @interactive = interactive
+  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),
+      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)
+    end
+  end
+
+  private
+
+  def resource_class_name
+    @resource.class.name
+  end
+
+  def wrapper_tag(...)
+    @interactive ? a(...) : div(...)
+  end
+end

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

@@ -0,0 +1,49 @@
+class Oversee::Field::Form < Oversee::Base
+  include Phlex::Rails::Helpers::FormWith
+
+  def initialize(resource:, key: nil, value: nil, datatype: :string, method: :patch)
+    @resource = resource
+    @key = key
+    @value = value
+    @datatype = datatype
+    @method = method
+  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)
+      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
+        plain "Save"
+      }
+    end
+  end
+
+  private
+
+  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/boolean.rb

@@ -0,0 +1,23 @@
+class Oversee::Field::Input::Boolean < Phlex::HTML
+  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
+
+  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

@@ -0,0 +1,20 @@
+class Oversee::Field::Input::Datetime < 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: "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

@@ -0,0 +1,20 @@
+class Oversee::Field::Input::Integer < 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: "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/string.rb

@@ -0,0 +1,20 @@
+class Oversee::Field::Input::String < 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: "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

@@ -0,0 +1,26 @@
+class Oversee::Field::Input < Oversee::Base
+  MAP = {
+    string: Oversee::Field::Input::String,
+    boolean: Oversee::Field::Input::Boolean,
+    integer: Oversee::Field::Input::Integer,
+    datetime: Oversee::Field::Input::Datetime,
+    text: Oversee::Field::Input::String,
+    enum: Oversee::Field::Input::String
+  }
+
+  def initialize(key: nil, value: nil, datatype: :string)
+    @key = key
+    @value = value
+    @datatype = datatype
+  end
+
+  def view_template
+    render component_class.new(key: @key, value: @value)
+  end
+
+  private
+
+  def component_class
+    MAP[@datatype.to_sym] || Oversee::Field::Input::String
+  end
+end

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

@@ -0,0 +1,24 @@
+class Oversee::Field::Label < Oversee::Base
+  ICON_MAP = {
+    string: Phlex::Icons::Iconoir::Text,
+    text: Phlex::Icons::Iconoir::TextSquare,
+    integer: Phlex::Icons::Iconoir::Number0Square,
+    datetime: Phlex::Icons::Iconoir::Calendar,
+    boolean: Phlex::Icons::Iconoir::SwitchOn,
+    data: Phlex::Icons::Iconoir::Page,
+  }
+
+  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: "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) }
+    end
+  end
+end

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

@@ -0,0 +1,50 @@
+class Oversee::Field::Value::Boolean < Phlex::HTML
+  def initialize(key: nil, value: nil, kind: :value)
+    @value = value
+  end
+
+  def view_template
+    @value ? check_icon : x_icon
+  end
+
+  private
+
+  def check_icon
+    svg(
+      stroke_width: "2",
+      viewbox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      color: "currentColor",
+      class: "size-4 text-emerald-500"
+    ) do |s|
+      s.path(
+        d: "M5 13L9 17L19 7",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      )
+    end
+  end
+
+  def x_icon
+    svg(
+      stroke_width: "1.5",
+      viewbox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      color: "currentColor",
+      class: "size-4 text-rose-500"
+    ) do |s|
+      s.path(
+        d:
+          "M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426",
+        stroke: "currentColor",
+        stroke_width: "1.5",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+class Oversee::Field::Value::Datetime < Phlex::HTML
+  def initialize(key: nil, value: nil, kind: :value)
+    @value = value
+  end
+
+  def view_template
+    time(title: @value) { @value&.to_fs(:long) || "N/A" }
+  end
+end

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

@@ -0,0 +1,9 @@
+class Oversee::Field::Value::Enum < Phlex::HTML
+  def initialize(key: nil, value: nil, kind: :value)
+    @value = value
+  end
+
+  def view_template
+    p(class:"inline-flex px-2 py-1 text-red-500") { @value.to_s }
+  end
+end

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

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