admin_suite 0.1.0

data/app/javascript/controllers/admin_suite/json_editor_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus"
+
+// JSON Editor Controller (Admin Suite)
+export default class extends Controller {
+  static targets = ["input", "error"]
+
+  validate() {
+    if (!this.hasInputTarget) return
+
+    const value = this.inputTarget.value.trim()
+
+    if (value === "") {
+      this.clearError()
+      return
+    }
+
+    try {
+      JSON.parse(value)
+      this.clearError()
+      this.inputTarget.classList.remove("border-red-500", "dark:border-red-500")
+      this.inputTarget.classList.add("border-slate-300", "dark:border-slate-600")
+    } catch (e) {
+      this.showError(e.message)
+      this.inputTarget.classList.remove("border-slate-300", "dark:border-slate-600")
+      this.inputTarget.classList.add("border-red-500", "dark:border-red-500")
+    }
+  }
+
+  format(event) {
+    event?.preventDefault()
+    if (!this.hasInputTarget) return
+
+    const value = this.inputTarget.value.trim()
+    if (value === "") return
+
+    try {
+      const parsed = JSON.parse(value)
+      const formatted = JSON.stringify(parsed, null, 2)
+      this.inputTarget.value = formatted
+      this.clearError()
+      this.inputTarget.classList.remove("border-red-500", "dark:border-red-500")
+      this.inputTarget.classList.add("border-slate-300", "dark:border-slate-600")
+    } catch (e) {
+      this.showError(e.message)
+      this.inputTarget.classList.remove("border-slate-300", "dark:border-slate-600")
+      this.inputTarget.classList.add("border-red-500", "dark:border-red-500")
+    }
+  }
+
+  showError(message) {
+    if (!this.hasErrorTarget) return
+    this.errorTarget.textContent = `Invalid JSON: ${message}`
+    this.errorTarget.classList.remove("hidden")
+  }
+
+  clearError() {
+    if (!this.hasErrorTarget) return
+    this.errorTarget.textContent = ""
+    this.errorTarget.classList.add("hidden")
+  }
+}
+

data/app/javascript/controllers/admin_suite/live_filter_controller.js

@@ -0,0 +1,71 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Live Filter Controller (Admin Suite)
+ *
+ * Automatically submits filter forms on input change with debouncing.
+ * Works with Turbo Frames to provide smooth, live-updating results.
+ */
+export default class extends Controller {
+  static targets = ["input"]
+  static values = {
+    debounce: { type: Number, default: 300 },
+    minLength: { type: Number, default: 3 },
+  }
+
+  connect() {
+    this.timeout = null
+  }
+
+  disconnect() {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+  }
+
+  submit() {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+    this.element.requestSubmit()
+  }
+
+  debounce() {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+
+    this.timeout = setTimeout(() => {
+      this.element.requestSubmit()
+    }, this.debounceValue)
+  }
+
+  debounceWithMinLength(event) {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+
+    const value = event.target.value
+    const minLength =
+      parseInt(event.target.dataset.adminSuiteLiveFilterMinLengthValue) ||
+      this.minLengthValue
+
+    if (value.length === 0 || value.length >= minLength) {
+      this.timeout = setTimeout(() => {
+        this.element.requestSubmit()
+      }, this.debounceValue)
+    }
+  }
+
+  clear() {
+    this.inputTargets.forEach((input) => {
+      if (input.type === "checkbox") {
+        input.checked = false
+      } else {
+        input.value = ""
+      }
+    })
+    this.submit()
+  }
+}
+

data/app/javascript/controllers/admin_suite/markdown_editor_controller.js

@@ -0,0 +1,67 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Markdown Editor Controller (Admin Suite)
+ *
+ * Initializes EasyMDE on a textarea element for rich markdown editing.
+ * EasyMDE is loaded globally via script tag in the admin layout.
+ */
+export default class extends Controller {
+  static targets = ["textarea"]
+
+  connect() {
+    this.initEditor()
+  }
+
+  initEditor() {
+    if (typeof window.EasyMDE === "undefined") {
+      setTimeout(() => this.initEditor(), 100)
+      return
+    }
+
+    if (this.editor) return
+
+    this.editor = new window.EasyMDE({
+      element: this.textareaTarget,
+      spellChecker: false,
+      autofocus: false,
+      autosave: { enabled: false },
+      status: ["lines", "words", "cursor"],
+      placeholder: "Write your content in Markdown...",
+      toolbar: [
+        "bold",
+        "italic",
+        "heading",
+        "|",
+        "quote",
+        "unordered-list",
+        "ordered-list",
+        "|",
+        "link",
+        "image",
+        "code",
+        "|",
+        "preview",
+        "side-by-side",
+        "fullscreen",
+        "|",
+        "guide",
+      ],
+      minHeight: "400px",
+      renderingConfig: { codeSyntaxHighlighting: true },
+      forceSync: true,
+    })
+
+    this.editor.codemirror.on("change", () => {
+      this.textareaTarget.value = this.editor.value()
+    })
+  }
+
+  disconnect() {
+    if (this.editor) {
+      this.editor.toTextArea()
+      this.editor = null
+    }
+  }
+}
+

data/app/javascript/controllers/admin_suite/searchable_select_controller.js

@@ -0,0 +1,171 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Searchable Select Controller (Admin Suite)
+ *
+ * Provides a searchable dropdown for select fields with optional AJAX search.
+ */
+export default class extends Controller {
+  static targets = ["input", "search", "dropdown"]
+  static values = {
+    options: { type: Array, default: [] },
+    creatable: { type: Boolean, default: false },
+    searchUrl: { type: String, default: "" },
+  }
+
+  connect() {
+    this.isOpen = false
+    this.selectedIndex = -1
+    this.filteredOptions = [...this.optionsValue]
+
+    this.clickOutside = this.clickOutside.bind(this)
+    document.addEventListener("click", this.clickOutside)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.clickOutside)
+  }
+
+  open() {
+    this.isOpen = true
+    this.filteredOptions = [...this.optionsValue]
+    this.renderDropdown()
+    this.dropdownTarget.classList.remove("hidden")
+  }
+
+  close() {
+    this.isOpen = false
+    this.dropdownTarget.classList.add("hidden")
+    this.selectedIndex = -1
+  }
+
+  clickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  search() {
+    const query = this.searchTarget.value.toLowerCase().trim()
+
+    if (this.searchUrlValue) {
+      this.fetchOptions(query)
+    } else {
+      this.filteredOptions = this.optionsValue.filter((opt) =>
+        opt.label.toLowerCase().includes(query),
+      )
+
+      if (
+        this.creatableValue &&
+        query &&
+        !this.filteredOptions.some((o) => o.value === query)
+      ) {
+        this.filteredOptions.push({
+          value: query,
+          label: `Create "${query}"`,
+          isNew: true,
+        })
+      }
+
+      this.renderDropdown()
+    }
+
+    if (!this.isOpen) this.open()
+  }
+
+  async fetchOptions(query) {
+    try {
+      const response = await fetch(
+        `${this.searchUrlValue}?q=${encodeURIComponent(query)}`,
+      )
+      const data = await response.json()
+      this.filteredOptions = data.map((item) => ({
+        value: item.id || item.value,
+        label: item.name || item.label,
+      }))
+
+      if (
+        this.creatableValue &&
+        query &&
+        !this.filteredOptions.some((o) => o.value === query)
+      ) {
+        this.filteredOptions.push({
+          value: query,
+          label: `Create "${query}"`,
+          isNew: true,
+        })
+      }
+
+      this.renderDropdown()
+    } catch (error) {
+      console.error("Search failed:", error)
+    }
+  }
+
+  renderDropdown() {
+    if (!this.filteredOptions.length) {
+      this.dropdownTarget.innerHTML = `
+        <div class="px-3 py-2 text-sm text-slate-400 dark:text-slate-500">No results found</div>
+      `
+      return
+    }
+
+    this.dropdownTarget.innerHTML = this.filteredOptions
+      .map(
+        (opt, index) => `
+      <button type="button"
+              class="block w-full text-left px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-700 ${index === this.selectedIndex ? "bg-slate-100 dark:bg-slate-700" : ""} ${opt.isNew ? "text-indigo-600 dark:text-indigo-400 font-medium" : "text-slate-700 dark:text-slate-200"}"
+              data-action="click->admin-suite--searchable-select#select"
+              data-value="${opt.value}"
+              data-label="${opt.label}">
+        ${opt.label}
+      </button>
+    `,
+      )
+      .join("")
+  }
+
+  select(event) {
+    const value = event.currentTarget.dataset.value
+    const label = event.currentTarget.dataset.label
+      .replace(/^Create "/, "")
+      .replace(/"$/, "")
+
+    this.inputTarget.value = value
+    this.searchTarget.value = label
+    this.close()
+  }
+
+  keydown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        this.selectedIndex = Math.min(
+          this.selectedIndex + 1,
+          this.filteredOptions.length - 1,
+        )
+        this.renderDropdown()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.selectedIndex = Math.max(this.selectedIndex - 1, 0)
+        this.renderDropdown()
+        break
+      case "Enter":
+        event.preventDefault()
+        if (this.selectedIndex >= 0 && this.filteredOptions[this.selectedIndex]) {
+          const opt = this.filteredOptions[this.selectedIndex]
+          this.inputTarget.value = opt.value
+          this.searchTarget.value = opt.label
+            .replace(/^Create "/, "")
+            .replace(/"$/, "")
+          this.close()
+        }
+        break
+      case "Escape":
+        this.close()
+        break
+    }
+  }
+}
+

data/app/javascript/controllers/admin_suite/sidebar_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="admin-suite--sidebar"
+export default class extends Controller {
+  static targets = ["overlay", "mobileSidebar"]
+
+  toggle(event) {
+    event.preventDefault()
+
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.classList.toggle("hidden")
+    }
+
+    if (this.hasMobileSidebarTarget) {
+      this.mobileSidebarTarget.classList.toggle("hidden")
+    }
+  }
+
+  close(event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.classList.add("hidden")
+    }
+
+    if (this.hasMobileSidebarTarget) {
+      this.mobileSidebarTarget.classList.add("hidden")
+    }
+  }
+}
+

data/app/javascript/controllers/admin_suite/tag_select_controller.js

@@ -0,0 +1,193 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Tag Select Controller (Admin Suite)
+ *
+ * Provides a tag/multi-select input with inline tag creation.
+ */
+export default class extends Controller {
+  static targets = ["tags", "input", "dropdown", "placeholder"]
+  static values = {
+    creatable: { type: Boolean, default: true },
+    suggestions: { type: Array, default: [] },
+    fieldName: { type: String, default: "" },
+  }
+
+  connect() {
+    this.selectedTags = this.getExistingTags()
+
+    this.clickOutside = this.clickOutside.bind(this)
+    document.addEventListener("click", this.clickOutside)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.clickOutside)
+  }
+
+  getExistingTags() {
+    const tags = []
+    this.tagsTarget
+      .querySelectorAll("span[class*='bg-indigo']")
+      .forEach((el) => {
+        const hidden = el.querySelector("input[type='hidden']")
+        if (hidden) tags.push(hidden.value)
+      })
+    return tags
+  }
+
+  clickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.closeDropdown()
+    }
+  }
+
+  search() {
+    const query = this.inputTarget.value.toLowerCase().trim()
+
+    if (!query) {
+      this.closeDropdown()
+      return
+    }
+
+    if (this.hasDropdownTarget) {
+      const buttons = this.dropdownTarget.querySelectorAll("button")
+      let hasVisible = false
+
+      buttons.forEach((btn) => {
+        const value = btn.dataset.value.toLowerCase()
+        if (
+          value.includes(query) &&
+          !this.selectedTags.includes(btn.dataset.value)
+        ) {
+          btn.classList.remove("hidden")
+          hasVisible = true
+        } else {
+          btn.classList.add("hidden")
+        }
+      })
+
+      if (hasVisible) {
+        this.dropdownTarget.classList.remove("hidden")
+      } else if (this.creatableValue) {
+        this.dropdownTarget.classList.remove("hidden")
+      } else {
+        this.closeDropdown()
+      }
+    }
+  }
+
+  closeDropdown() {
+    if (this.hasDropdownTarget) {
+      this.dropdownTarget.classList.add("hidden")
+    }
+  }
+
+  keydown(event) {
+    const value = this.inputTarget.value.trim()
+
+    switch (event.key) {
+      case "Enter":
+      case ",":
+        event.preventDefault()
+        if (value && this.creatableValue) {
+          this.addTag(value)
+        }
+        break
+      case "Backspace":
+        if (!value && this.selectedTags.length > 0) {
+          this.removeLastTag()
+        }
+        break
+      case "Escape":
+        this.closeDropdown()
+        break
+    }
+  }
+
+  select(event) {
+    event.preventDefault()
+    const value = event.currentTarget.dataset.value
+    this.addTag(value)
+    this.closeDropdown()
+  }
+
+  addTag(value) {
+    if (this.selectedTags.includes(value)) return
+
+    this.selectedTags.push(value)
+
+    const tagEl = document.createElement("span")
+    tagEl.className =
+      "inline-flex items-center gap-1 px-2 py-1 bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 rounded text-sm"
+    tagEl.innerHTML = `
+      ${this.escapeHtml(value)}
+      <input type="hidden" name="${this.getFieldName()}" value="${this.escapeHtml(value)}">
+      <button type="button" class="text-indigo-500 hover:text-indigo-700 font-bold" data-action="admin-suite--tag-select#remove">×</button>
+    `
+
+    this.inputTarget.parentNode.insertBefore(tagEl, this.inputTarget)
+    this.inputTarget.value = ""
+    this.inputTarget.focus()
+  }
+
+  remove(event) {
+    event.preventDefault()
+    const tagEl = event.currentTarget.closest("span")
+    const hidden = tagEl.querySelector("input[type='hidden']")
+
+    if (hidden) {
+      const index = this.selectedTags.indexOf(hidden.value)
+      if (index > -1) this.selectedTags.splice(index, 1)
+    }
+
+    tagEl.remove()
+  }
+
+  removeLastTag() {
+    const tags = this.tagsTarget.querySelectorAll("span[class*='bg-indigo']")
+    if (tags.length > 0) {
+      const lastTag = tags[tags.length - 1]
+      const hidden = lastTag.querySelector("input[type='hidden']")
+
+      if (hidden) {
+        const index = this.selectedTags.indexOf(hidden.value)
+        if (index > -1) this.selectedTags.splice(index, 1)
+      }
+
+      lastTag.remove()
+    }
+  }
+
+  getFieldName() {
+    if (this.fieldNameValue) return this.fieldNameValue
+
+    const existing = this.tagsTarget.querySelector(
+      "input[type='hidden']:not([data-admin-suite--tag-select-target='placeholder'])",
+    )
+    if (existing && existing.name) return existing.name
+
+    if (this.hasPlaceholderTarget && this.placeholderTarget.name) {
+      return this.placeholderTarget.name
+    }
+
+    const form = this.element.closest("form")
+    if (form) {
+      const anyHidden = form.querySelector("input[type='hidden'][name*='[']")
+      if (anyHidden) {
+        const match = anyHidden.name.match(/^([^\[]+)\[/)
+        if (match) {
+          return `${match[1]}[tag_list]`
+        }
+      }
+    }
+
+    return "tag_list"
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement("div")
+    div.textContent = text
+    return div.innerHTML
+  }
+}
+

data/app/javascript/controllers/admin_suite/toggle_switch_controller.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Toggle Switch Controller (Admin Suite)
+ */
+export default class extends Controller {
+  static targets = ["button", "thumb", "input", "label"]
+  static values = {
+    activeClass: String,
+    inactiveClasses: String
+  }
+
+  connect() {
+    this.checked = this.inputTarget?.value === "1" || this.inputTarget?.value === "true"
+    this.updateVisual()
+  }
+
+  get activeClass() {
+    return this.hasActiveClassValue ? this.activeClassValue : "bg-indigo-600"
+  }
+
+  get inactiveClasses() {
+    return this.hasInactiveClassesValue ? this.inactiveClassesValue : "bg-slate-200 dark:bg-slate-700"
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    this.checked = !this.checked
+    this.updateVisual()
+    this.updateInput()
+  }
+
+  updateVisual() {
+    if (this.hasButtonTarget) {
+      if (this.checked) {
+        this.buttonTarget.classList.remove(...this.inactiveClasses.split(" "))
+        this.buttonTarget.classList.add(this.activeClass)
+      } else {
+        this.buttonTarget.classList.remove(this.activeClass)
+        this.buttonTarget.classList.add(...this.inactiveClasses.split(" "))
+      }
+      this.buttonTarget.setAttribute("aria-checked", this.checked.toString())
+    }
+
+    if (this.hasThumbTarget) {
+      if (this.checked) {
+        this.thumbTarget.classList.remove("translate-x-0")
+        this.thumbTarget.classList.add("translate-x-5")
+      } else {
+        this.thumbTarget.classList.remove("translate-x-5")
+        this.thumbTarget.classList.add("translate-x-0")
+      }
+    }
+
+    if (this.hasLabelTarget) {
+      this.labelTarget.textContent = this.checked ? "Enabled" : "Disabled"
+    }
+  }
+
+  updateInput() {
+    if (this.hasInputTarget) {
+      this.inputTarget.value = this.checked ? "1" : "0"
+    }
+  }
+}
+

data/app/views/admin_suite/dashboard/index.html.erb

@@ -0,0 +1,21 @@
+<% content_for :title, "Developer Portal" %>
+
+<div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+  <div class="mb-6">
+    <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Developer Portal</h1>
+    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
+      Admin framework for managing all application resources across three specialized portals.
+    </p>
+  </div>
+
+  <% @dashboard_sections.each do |section| %>
+    <% if section[:title].present? %>
+      <div class="mt-8 mb-3 flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
+        <%= admin_suite_icon("activity", class: "w-4 h-4 text-slate-400") %>
+        <span><%= section[:title] %></span>
+      </div>
+    <% end %>
+
+    <%= render_dashboard_rows(section[:rows]) %>
+  <% end %>
+</div>