adds a users index

app/components/settings/tabs_component.html.erb

@@ -1,16 +1,17 @@
 <div>
   <div class="sm:hidden" data-controller="settings-tabs">
     <label for="tabs" class="sr-only">Select a tab</label>
-    <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
     <select data-action="change->settings-tabs#handleChange" name="tabs" class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
       <%= settings_option "General", settings_path %>
+      <%= settings_option "User Management", settings_users_path %>
       <%= settings_option "Billing", settings_billing_information_path %>
     </select>
   </div>
   <div class="hidden sm:block">
     <div class="border-b border-gray-200">
       <nav class="-mb-px flex space-x-8" aria-label="Tabs">
         <%= settings_link "General", settings_path %>
+        <%= settings_link "User Management", settings_users_path %>
         <%= settings_link "Billing", settings_billing_information_path %>
       </nav>
     </div>

app/components/settings/users/list_item_component.html.erb

@@ -0,0 +1,31 @@
+<li class="relative flex justify-between gap-x-6 py-5">
+  <div class="flex min-w-0 gap-x-4">
+    <%= helpers.user_gravatar(user: @user, css_classes: "h-12 w-12 flex-none rounded-full bg-gray-50") %>
+    <div class="min-w-0 flex-auto">
+      <p class="text-sm font-semibold leading-6 text-gray-900">
+        <a href="#">
+          <span class="absolute inset-x-0 -top-px bottom-0"></span>
+          <%= user_name %>
+        </a>
+      </p>
+      <p class="mt-1 flex text-xs leading-5 text-gray-500">
+        <a href="mailto:<%= user_email %>" class="relative truncate hover:underline">
+          <%= user_email %>
+        </a>
+      </p>
+    </div>
+  </div>
+  <div class="flex shrink-0 items-center gap-x-4">
+    <div class="hidden sm:flex sm:flex-col sm:items-end">
+      <% if user_job_title %>
+        <p class="text-sm leading-6 text-gray-900"><%= user_job_title %></p>
+      <% end %>
+      <div class="mt-1 flex items-center gap-x-1.5">
+        <%= render(Settings::Users::StatusComponent.new(status: user_status)) %>
+      </div>
+    </div>
+    <svg class="h-5 w-5 flex-none text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+    </svg>
+  </div>
+</li>

app/components/settings/users/list_item_component.rb

@@ -0,0 +1,39 @@
+module Settings
+  module Users
+    class ListItemComponent < ViewComponent::Base
+      def initialize(current_company:, user:)
+        @current_company = current_company
+        @user = user
+      end
+
+      def user_name
+        @user.name
+      end
+
+      def user_email
+        @user.email
+      end
+
+      def user_status
+        current_company_membership.status
+      end
+
+      def user_role
+        @user.role
+      end
+
+      def user_job_title
+        # TODO: add a field for users to set this.
+        ""
+      end
+
+      private
+
+      def current_company_membership
+        return @_membership if defined?(@_membership)
+
+        @_membership = @user.memberships.where(company: @current_company).first
+      end
+    end
+  end
+end

app/components/settings/users/status_component.html.erb

@@ -0,0 +1,3 @@
+<span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset <%= user_status_color %>">
+  Status: <%= user_status %>
+</span>

app/components/settings/users/status_component.rb

@@ -0,0 +1,22 @@
+module Settings
+  module Users
+    class StatusComponent < ViewComponent::Base
+      def initialize(status:)
+        @status = status
+      end
+
+      def user_status
+        @status.capitalize
+      end
+
+      def user_status_color
+        case @status
+        when Membership::ACTIVE
+          "bg-green-50 text-green-700 ring-green-600/20"
+        else
+          "bg-gray-50 text-gray-600 ring-gray-500/10"
+        end
+      end
+    end
+  end
+end

app/controllers/settings/users_controller.rb

@@ -0,0 +1,26 @@
+class Settings::UsersController < ApplicationController
+  before_action :require_user!
+  before_action :require_company_owner_or_admin!
+
+  def index
+    @users = current_company.users.all
+  end
+
+  def show
+  end
+
+  def edit
+  end
+
+  def update
+  end
+
+  def new
+  end
+
+  def create
+  end
+
+  def destroy
+  end
+end

app/views/settings/users/index.html.erb

@@ -0,0 +1,9 @@
+<%= render(Settings::TabsComponent.new) %>
+
+<div class="bg-white p-4 mt-4">
+  <ul role="list" class="divide-y divide-gray-100">
+    <% @users.each do |user| %>
+      <%= render(Settings::Users::ListItemComponent.new(user:, current_company:)) %>
+    <% end %>
+  </ul>
+</div>

config/routes.rb

@@ -30,6 +30,7 @@
         post :create_checkout_session
       end
     end
+    resources :users, controller: "settings/users"
   end
 
   root "dashboard#show"