terrazzo 0.2.3 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8912409821769ce6f2303842822a9d33696bef4a24c9fdc9974411a99dccc7b0
-  data.tar.gz: a171f982161da734439ac15c77cafa831ace5f8f9b8f87b43d93aa3107cf67d1
+  metadata.gz: f76fda78e25cb79116bd5f5f00b0b57e750503e3ebfdbee9a7bfe55dd8c17f34
+  data.tar.gz: 5cf113e4e1bfdd17591a3e50e1e993668da1408041efcc28a7f17b4a1b0eac05
 SHA512:
-  metadata.gz: 1394dab4447f66fbda0801d3b60a74ddd8f0325b6927562c4f8cf7b33212491b029efc78b12d5d8eb887496fed9261b8abb3b75f4e5f2148d74a80061951643a
-  data.tar.gz: f16c4e076d8f693b789622073df1fd9ccb5bedf36afb4eaa1032c4da09e8d87cc69b5a4929c8dcea28d0228c2ef53fc7476e71c8e12eee1e98a8b057982bad4a
+  metadata.gz: b60b58629158604c651402f6f920372f07146115b05f46613a2909be8af868f17005092bf7c84e288a4789724408e59150801fdc0b4f59c6575db1e05bb60f37
+  data.tar.gz: 9f6342b35c22e98a56f465221ef5e0bcc8911fcf75ee33ebea146144232e84a85b3c199b4ae14ce5969868c983587ca2cb59660ba96e2d2123c9ee1cc71aec36

data/app/controllers/terrazzo/application_controller.rb

@@ -16,7 +16,7 @@ module Terrazzo
 
     prepend Terrazzo::UsesSuperglue::TemplateLookupOverride
 
-    helper_method :namespace, :dashboard, :resource_name, :resource_class, :application_title, :terrazzo_page_identifier
+    helper_method :namespace, :dashboard, :resource_name, :resource_class, :application_title, :terrazzo_page_identifier, :route_exists?
 
     def index
       search = Terrazzo::Search.new(scoped_resource, dashboard, params[:search])
@@ -196,9 +196,25 @@ module Terrazzo
     # Build a page identifier that matches the user's namespace, not the
     # engine's internal template path. The React page-to-component mapping
     # keys off this identifier (e.g. "admin/application/index").
+    #
+    # Map create → new and update → edit so that failed validations
+    # (which render :new / :edit) resolve to the correct React component.
+    TERRAZZO_ACTION_MAP = { "create" => "new", "update" => "edit" }.freeze
+
     def terrazzo_page_identifier
       ns = controller_path.split("/").first
-      "#{ns}/application/#{action_name}"
+      mapped_action = TERRAZZO_ACTION_MAP[action_name] || action_name
+      "#{ns}/application/#{mapped_action}"
+    end
+
+    def route_exists?(action)
+      @_route_exists_cache ||= {}
+      return @_route_exists_cache[action] if @_route_exists_cache.key?(action)
+
+      @_route_exists_cache[action] = Rails.application.routes.routes.any? do |route|
+        route.defaults[:controller] == controller_path &&
+          route.defaults[:action] == action.to_s
+      end
     end
 
     private

data/app/views/terrazzo/application/_navigation.json.props

@@ -0,0 +1,12 @@
+resources = Terrazzo::Namespace.new(namespace).resources_with_index_route
+
+json.array! [{ label: "Resources", resources: resources }] do |group|
+  json.label group[:label]
+  json.items do
+    json.array! group[:resources] do |r|
+      json.label r.resource_name.humanize.pluralize
+      json.path url_for(controller: "/#{r.controller_path}", action: :index, only_path: true)
+      json.active r.controller_path == controller_path
+    end
+  end
+end

data/app/views/terrazzo/application/edit.json.props

@@ -5,7 +5,8 @@ json.pageTitle t("terrazzo.actions.edit", resource_name: resource_name)
 json.form do
   json.props({
     action: polymorphic_path([namespace, @resource]),
-    method: "post"
+    method: "post",
+    encType: "multipart/form-data"
   })
   json.extras do
     if protect_against_forgery?
@@ -60,11 +61,3 @@ rescue ActionController::UrlGenerationError
   nil
 end
 json.resourceName resource_name
-
-json.navigation do
-  json.array! Terrazzo::Namespace.new(namespace).resources_with_index_route do |nav_resource|
-    json.label nav_resource.resource_name.humanize.pluralize
-    json.path url_for(controller: "/#{nav_resource.controller_path}", action: :index, only_path: true)
-    json.active nav_resource.controller_path == controller_path
-  end
-end

data/app/views/terrazzo/application/index.json.props

@@ -33,8 +33,8 @@ json.table do
     json.array! @resources do |resource|
       json.id resource.id
       json.showPath polymorphic_path([namespace, resource]) rescue nil
-      json.editPath edit_polymorphic_path([namespace, resource]) rescue nil
-      json.deletePath polymorphic_path([namespace, resource]) rescue nil
+      json.editPath route_exists?(:edit) ? (edit_polymorphic_path([namespace, resource]) rescue nil) : nil
+      json.deletePath route_exists?(:destroy) ? (polymorphic_path([namespace, resource]) rescue nil) : nil
 
       json.cells do
         json.array! @page.attribute_names do |attr|
@@ -89,12 +89,4 @@ end
 
 json.resourceName resource_name.pluralize
 json.singularResourceName resource_name
-json.newResourcePath new_polymorphic_path([namespace, resource_class]) rescue nil
-
-json.navigation do
-  json.array! Terrazzo::Namespace.new(namespace).resources_with_index_route do |nav_resource|
-    json.label nav_resource.resource_name.humanize.pluralize
-    json.path url_for(controller: "/#{nav_resource.controller_path}", action: :index, only_path: true)
-    json.active nav_resource.controller_path == controller_path
-  end
-end
+json.newResourcePath route_exists?(:new) ? (new_polymorphic_path([namespace, resource_class]) rescue nil) : nil

data/app/views/terrazzo/application/new.json.props

@@ -6,7 +6,8 @@ json.pageTitle t("terrazzo.actions.new", resource_name: resource_name)
 json.form do
   json.props({
     action: polymorphic_path([namespace, resource_class]),
-    method: "post"
+    method: "post",
+    encType: "multipart/form-data"
   })
   json.extras do
     if protect_against_forgery?
@@ -55,11 +56,3 @@ rescue ActionController::UrlGenerationError
   nil
 end
 json.resourceName resource_name
-
-json.navigation do
-  json.array! Terrazzo::Namespace.new(namespace).resources_with_index_route do |nav_resource|
-    json.label nav_resource.resource_name.humanize.pluralize
-    json.path url_for(controller: "/#{nav_resource.controller_path}", action: :index, only_path: true)
-    json.active nav_resource.controller_path == controller_path
-  end
-end

data/app/views/terrazzo/application/show.json.props

@@ -34,8 +34,8 @@ json.attributes do
   end
 end
 
-json.editPath edit_polymorphic_path([namespace, @resource]) rescue nil
-json.deletePath polymorphic_path([namespace, @resource]) rescue nil
+json.editPath route_exists?(:edit) ? (edit_polymorphic_path([namespace, @resource]) rescue nil) : nil
+json.deletePath route_exists?(:destroy) ? (polymorphic_path([namespace, @resource]) rescue nil) : nil
 json.indexPath begin
   url_for(controller: controller_path, action: :index, only_path: true)
 rescue ActionController::UrlGenerationError
@@ -43,11 +43,3 @@ rescue ActionController::UrlGenerationError
 end
 json.resourceName resource_name
 json.pluralResourceName resource_name.pluralize
-
-json.navigation do
-  json.array! Terrazzo::Namespace.new(namespace).resources_with_index_route do |nav_resource|
-    json.label nav_resource.resource_name.humanize.pluralize
-    json.path url_for(controller: "/#{nav_resource.controller_path}", action: :index, only_path: true)
-    json.active nav_resource.controller_path == controller_path
-  end
-end

data/lib/generators/terrazzo/dashboard/dashboard_generator.rb

@@ -71,8 +71,18 @@ module Terrazzo
           types[col.name.to_sym] = column_to_field_type(col)
         end
 
+        # Active Storage attachment names (used to filter internal associations)
+        attachment_names = if model_class.respond_to?(:reflect_on_all_attachments)
+          model_class.reflect_on_all_attachments.map(&:name).to_set
+        else
+          Set.new
+        end
+
         # Associations
         associations.each do |assoc|
+          # Skip Active Storage internal associations (e.g., document_attachment, document_blob)
+          next if active_storage_internal?(assoc.name, attachment_names)
+
           case assoc.macro
           when :belongs_to
             types[assoc.name] = assoc.options[:polymorphic] ? "Field::Polymorphic" : "Field::BelongsTo"
@@ -83,6 +93,13 @@ module Terrazzo
           end
         end
 
+        # Active Storage attachments
+        attachment_names.each do |name|
+          attachment = model_class.reflect_on_attachment(name)
+          next if attachment.macro == :has_many_attached
+          types[name] = "Field::Asset"
+        end
+
         types
       end
 
@@ -106,6 +123,15 @@ module Terrazzo
         end
       end
 
+      def active_storage_internal?(assoc_name, attachment_names)
+        name = assoc_name.to_s
+        attachment_names.any? do |att|
+          att_s = att.to_s
+          name == "#{att_s}_attachment" || name == "#{att_s}_blob" ||
+            name == "#{att_s}_attachments" || name == "#{att_s}_blobs"
+        end
+      end
+
       def has_enum?(column_name)
         model_class.defined_enums.key?(column_name.to_s)
       end

data/lib/generators/terrazzo/eject/eject_generator.rb

@@ -0,0 +1,232 @@
+require "rails/generators"
+
+module Terrazzo
+  module Generators
+    class EjectGenerator < Rails::Generators::Base
+      source_root File.expand_path("../views/templates", __dir__)
+
+      argument :target, type: :string,
+        desc: "What to eject (e.g., fields/string, components/Layout, ui/button, pages/index)"
+
+      class_option :namespace, type: :string, default: "admin",
+        desc: "Admin namespace"
+
+      def eject
+        case category
+        when "fields"
+          eject_field
+        when "components"
+          eject_component
+        when "ui"
+          eject_ui
+        when "pages"
+          eject_page
+        when "navigation"
+          eject_navigation
+        else
+          say_status :error, "Unknown category '#{category}'. Use fields/, components/, ui/, pages/, or navigation", :red
+        end
+      end
+
+      private
+
+      def category
+        target.split("/").first
+      end
+
+      def component_name
+        target.split("/", 2).last
+      end
+
+      def namespace_name
+        options[:namespace]
+      end
+
+      def eject_field
+        field_type = component_name
+        source_dir = "fields/#{field_type}"
+
+        unless File.directory?(File.join(self.class.source_root, source_dir))
+          say_status :error, "Unknown field type '#{field_type}'", :red
+          return
+        end
+
+        %w[IndexField.jsx ShowField.jsx FormField.jsx].each do |file|
+          source = File.join(source_dir, file)
+          next unless File.exist?(File.join(self.class.source_root, source))
+          copy_file source, "app/views/#{namespace_name}/fields/#{field_type}/#{file}"
+        end
+
+        # Copy shared dependencies if needed
+        if field_uses_shared?(field_type)
+          copy_file "fields/shared/TextInputFormField.jsx",
+            "app/views/#{namespace_name}/fields/shared/TextInputFormField.jsx"
+        end
+
+        update_fields_barrel(field_type)
+      end
+
+      def eject_component
+        name = component_name
+        source = "components/#{name}.jsx"
+
+        unless File.exist?(File.join(self.class.source_root, source))
+          say_status :error, "Unknown component '#{name}'", :red
+          return
+        end
+
+        copy_file source, "app/views/#{namespace_name}/components/#{name}.jsx"
+        update_components_barrel(name)
+      end
+
+      def eject_ui
+        name = component_name
+        source = "components/ui/#{name}.jsx"
+
+        unless File.exist?(File.join(self.class.source_root, source))
+          say_status :error, "Unknown UI component '#{name}'", :red
+          return
+        end
+
+        copy_file source, "app/views/#{namespace_name}/components/ui/#{name}.jsx"
+        update_ui_barrel(name)
+      end
+
+      def eject_page
+        name = component_name
+        source = "pages/#{name}.jsx"
+
+        unless File.exist?(File.join(self.class.source_root, source))
+          say_status :error, "Unknown page template '#{name}'", :red
+          return
+        end
+
+        copy_file source, "app/views/#{namespace_name}/application/#{name}.jsx"
+      end
+
+      def eject_navigation
+        source = File.join(Terrazzo::Engine.root, "app/views/terrazzo/application/_navigation.json.props")
+        dest = "app/views/#{namespace_name}/application/_navigation.json.props"
+        copy_file source, dest
+        say "\nNavigation partial ejected to #{dest}.", :green
+        say "Edit it to customize your admin navigation."
+      end
+
+      def field_uses_shared?(field_type)
+        %w[string number email url password date date_time time].include?(field_type)
+      end
+
+      def update_fields_barrel(field_type)
+        barrel_path = "app/views/#{namespace_name}/fields/index.js"
+        barrel_file = File.join(destination_root, barrel_path)
+
+        type_label = field_type.split("_").map(&:capitalize).join("")
+        local_exports = <<~JS.strip
+          // #{type_label} - ejected
+          export { IndexField as #{type_label}IndexField } from "./#{field_type}/IndexField";
+          export { ShowField as #{type_label}ShowField } from "./#{field_type}/ShowField";
+          export { FormField as #{type_label}FormField } from "./#{field_type}/FormField";
+        JS
+
+        if File.exist?(barrel_file)
+          content = File.read(barrel_file)
+
+          # If barrel is still the default re-export-all, replace with explicit exports
+          if content.include?('export * from "terrazzo/fields"')
+            new_content = build_fields_barrel_with_ejection(field_type)
+            create_file barrel_path, new_content, force: true
+          else
+            # Barrel already has explicit exports; replace the line for this field type
+            # by inserting local exports before the terrazzo re-exports
+            unless content.include?("./#{field_type}/")
+              append_to_file barrel_path, "\n#{local_exports}\n"
+            end
+          end
+        end
+      end
+
+      def build_fields_barrel_with_ejection(ejected_field_type)
+        all_field_types = %w[
+          string text number boolean date date_time time email url password
+          select rich_text belongs_to has_many has_one polymorphic hstore
+        ]
+
+        lines = ['export { FieldRenderer, registerFieldType } from "terrazzo/fields";', ""]
+
+        all_field_types.each do |ft|
+          label = ft.split("_").map(&:capitalize).join("")
+          if ft == ejected_field_type
+            lines << "// #{label} - ejected"
+            lines << "export { IndexField as #{label}IndexField } from \"./#{ft}/IndexField\";"
+            lines << "export { ShowField as #{label}ShowField } from \"./#{ft}/ShowField\";"
+            lines << "export { FormField as #{label}FormField } from \"./#{ft}/FormField\";"
+          else
+            lines << "export { #{label}IndexField, #{label}ShowField, #{label}FormField } from \"terrazzo/fields\";"
+          end
+        end
+
+        lines.join("\n") + "\n"
+      end
+
+      def update_components_barrel(name)
+        barrel_path = "app/views/#{namespace_name}/components/index.js"
+        barrel_file = File.join(destination_root, barrel_path)
+
+        return unless File.exist?(barrel_file)
+
+        content = File.read(barrel_file)
+        if content.include?('export * from "terrazzo/components"')
+          export_name = component_export_name(name)
+          new_content = build_components_barrel_with_ejection(name, export_name)
+          create_file barrel_path, new_content, force: true
+        end
+      end
+
+      def build_components_barrel_with_ejection(ejected_name, export_name)
+        all_components = {
+          "Layout" => "Layout",
+          "app-sidebar" => "AppSidebar",
+          "site-header" => "SiteHeader",
+          "FlashMessages" => "FlashMessages",
+          "SearchBar" => "SearchBar",
+          "Pagination" => "Pagination",
+          "SortableHeader" => "SortableHeader",
+        }
+
+        lines = []
+        all_components.each do |file_name, export|
+          if file_name == ejected_name
+            lines << "export { #{export} } from \"./#{file_name}\"; // ejected"
+          else
+            lines << "export { #{export} } from \"terrazzo/components\";"
+          end
+        end
+
+        lines.join("\n") + "\n"
+      end
+
+      def update_ui_barrel(name)
+        barrel_path = "app/views/#{namespace_name}/components/ui/index.js"
+        barrel_file = File.join(destination_root, barrel_path)
+
+        return unless File.exist?(barrel_file)
+
+        content = File.read(barrel_file)
+        if content.include?('export * from "terrazzo/ui"')
+          new_content = "export * from \"terrazzo/ui\";\n"
+          new_content += "// Override ejected UI component:\n"
+          new_content += "export * from \"./#{name}\";\n"
+          create_file barrel_path, new_content, force: true
+        end
+      end
+
+      def component_export_name(file_name)
+        case file_name
+        when "app-sidebar" then "AppSidebar"
+        when "site-header" then "SiteHeader"
+        else file_name
+        end
+      end
+    end
+  end
+end

data/lib/generators/terrazzo/field/field_generator.rb

@@ -20,15 +20,22 @@ module Terrazzo
         end
       end
 
-      def show_registration_instructions
-        say "\nTo use your custom field, register it in your FieldRenderer.jsx:", :green
-        say "  import { IndexField as #{class_name}Index } from \"./#{file_name}/IndexField\";"
-        say "  import { ShowField as #{class_name}Show } from \"./#{file_name}/ShowField\";"
-        say "  import { FormField as #{class_name}Form } from \"./#{file_name}/FormField\";"
-        say ""
-        say "  registerFieldType(\"#{file_name}\", { index: #{class_name}Index, show: #{class_name}Show, form: #{class_name}Form });"
-        say ""
-        say "Then use it in your dashboard:"
+      def register_in_barrel
+        barrel_path = File.join(destination_root, "app/views/#{namespace_name}/fields/index.js")
+        return unless File.exist?(barrel_path)
+
+        registration = <<~JS
+
+          // #{class_name} - custom field
+          export { IndexField as #{class_name}IndexField } from "./#{file_name}/IndexField";
+          export { ShowField as #{class_name}ShowField } from "./#{file_name}/ShowField";
+          export { FormField as #{class_name}FormField } from "./#{file_name}/FormField";
+        JS
+
+        append_to_file "app/views/#{namespace_name}/fields/index.js", registration
+
+        say "\nCustom field '#{file_name}' registered in fields/index.js.", :green
+        say "Use it in your dashboard:"
         say "  #{file_name}: Terrazzo::Field::#{class_name},"
       end
 

data/lib/generators/terrazzo/field/templates/FormField.jsx.erb

@@ -1,6 +1,5 @@
 import React from "react";
-import { Input } from "../../components/ui/input";
-import { Label } from "../../components/ui/label";
+import { Input, Label } from "terrazzo/ui";
 
 export function FormField({ attribute, label, value, input, required }) {
   return (

data/lib/generators/terrazzo/install/install_generator.rb

@@ -21,7 +21,7 @@ module Terrazzo
       end
 
       def create_json_props_layout
-        copy_file "application.json.props",
+        template "application.json.props.tt",
           "app/views/layouts/#{namespace_name}/application.json.props"
       end
 

data/lib/generators/terrazzo/install/templates/admin.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@source "../../../node_modules/terrazzo/dist";
 
 @custom-variant dark (&:is(.dark *));
 

data/lib/generators/terrazzo/install/templates/{application.json.props → application.json.props.tt}

@@ -1,6 +1,7 @@
 path = request.format.json? ? param_to_dig_path(params[:props_at]) : nil
 
 json.data(dig: path) do
+  json.navigation(partial: ["<%= namespace_name %>/application/navigation"]) {}
   yield
 end
 

data/lib/generators/terrazzo/install/templates/page_to_page_mapping.js.erb

@@ -1,17 +1,7 @@
-<% if vite? -%>
-const pages = import.meta.glob("../../views/<%= namespace_name %>/**/*.jsx", { eager: true })
-
-export const pageToPageMapping = {}
-
-for (const key in pages) {
-  const identifier = key.replace("../../views/", "").replace(/\.jsx$/, "")
-  pageToPageMapping[identifier] = pages[key].default
-}
-<% else -%>
-import AdminIndex from "../../views/<%= namespace_name %>/application/index"
-import AdminShow from "../../views/<%= namespace_name %>/application/show"
-import AdminNew from "../../views/<%= namespace_name %>/application/new"
-import AdminEdit from "../../views/<%= namespace_name %>/application/edit"
+import AdminIndex from "../../views/<%= namespace_name %>/application/index";
+import AdminShow from "../../views/<%= namespace_name %>/application/show";
+import AdminNew from "../../views/<%= namespace_name %>/application/new";
+import AdminEdit from "../../views/<%= namespace_name %>/application/edit";
 
 export const pageToPageMapping = {
   '<%= namespace_name %>/application/index': AdminIndex,
@@ -19,4 +9,3 @@ export const pageToPageMapping = {
   '<%= namespace_name %>/application/new': AdminNew,
   '<%= namespace_name %>/application/edit': AdminEdit,
 }
-<% end -%>

data/lib/generators/terrazzo/views/templates/components/Layout.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import { AppSidebar } from "./app-sidebar";
 import { SiteHeader } from "./site-header";
 import { FlashMessages } from "./FlashMessages";
-import { SidebarProvider, SidebarInset } from "./ui/sidebar";
+import { SidebarProvider, SidebarInset } from "terrazzo/ui";
 
 export function Layout({ navigation, title, actions, children }) {
   return (

data/lib/generators/terrazzo/views/templates/components/Pagination.jsx

@@ -1,14 +1,14 @@
 import React, { useContext } from "react";
 import { NavigationContext } from "@thoughtbot/superglue";
 
-import { Field, FieldLabel } from "./ui/field";
+import { Field, FieldLabel } from "terrazzo/ui";
 import {
   Pagination as PaginationRoot,
   PaginationContent,
   PaginationItem,
   PaginationNext,
   PaginationPrevious,
-} from "./ui/pagination";
+} from "terrazzo/ui";
 import {
   Select,
   SelectContent,
@@ -16,7 +16,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "./ui/select";
+} from "terrazzo/ui";
 
 export function Pagination({ currentPage, totalPages, totalCount, perPage, nextPagePath, prevPagePath }) {
   const { remote, pageKey } = useContext(NavigationContext);

data/lib/generators/terrazzo/views/templates/components/SearchBar.jsx

@@ -1,7 +1,7 @@
 import React, { useRef, useContext } from "react";
 import { NavigationContext } from "@thoughtbot/superglue";
 
-import { Input } from "./ui/input";
+import { Input } from "terrazzo/ui";
 import { Search } from "lucide-react";
 
 export function SearchBar({ searchTerm, searchPath }) {

data/lib/generators/terrazzo/views/templates/components/SortableHeader.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ChevronUp, ChevronDown, ChevronsUpDown } from "lucide-react";
 
-import { TableHead } from "./ui/table";
+import { TableHead } from "terrazzo/ui";
 
 export function SortableHeader({ label, sortable, sortUrl, sortDirection }) {
   if (!sortable) {

data/lib/generators/terrazzo/views/templates/components/app-sidebar.jsx

@@ -11,7 +11,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "./ui/sidebar";
+} from "terrazzo/ui";
 
 export function AppSidebar({
   navigation,
@@ -27,7 +27,7 @@ export function AppSidebar({
               asChild
               className="data-[slot=sidebar-menu-button]:!p-1.5">
 
-              <a href={navigation[0]?.path ?? "#"} data-sg-visit>
+              <a href={navigation[0]?.items?.[0]?.path ?? navigation[0]?.path ?? "#"} data-sg-visit>
                 <LayoutDashboardIcon className="h-5 w-5" />
                 <span className="text-base font-semibold">{title}</span>
               </a>
@@ -36,26 +36,27 @@ export function AppSidebar({
         </SidebarMenu>
       </SidebarHeader>
       <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Resources</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {navigation.map((item) =>
-              <SidebarMenuItem key={item.path}>
-                  <SidebarMenuButton
-                  asChild
-                  isActive={item.active}
-                  tooltip={item.label}>
-
-                    <a href={item.path} data-sg-visit>
-                      <span>{item.label}</span>
-                    </a>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              )}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
+        {navigation.map((group) =>
+          <SidebarGroup key={group.label}>
+            <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) =>
+                  <SidebarMenuItem key={item.path}>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={item.active}
+                      tooltip={item.label}>
+                      <a href={item.path} data-sg-visit>
+                        <span>{item.label}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                )}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        )}
       </SidebarContent>
     </Sidebar>);