[DPC-4567] Update my organizations list page

dpc-portal/app/assets/stylesheets/_organizations-list.scss

@@ -0,0 +1,21 @@
+$visited-blue-link-color: #005ea2;
+
+.visited\:text-blue{
+  color: $visited-blue-link-color;
+
+  &:visited {
+    color: $visited-blue-link-color;
+  }
+}
+
+.truncate-text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table-bg-transparent {
+  th, td {
+    background-color: transparent;
+  }
+}

dpc-portal/app/assets/stylesheets/application.sass.scss

@@ -17,3 +17,4 @@
  */
 @forward "uswds-theme";
 @forward "uswds";
+@import "organizations-list";

dpc-portal/app/components/core/organization_list_row/organization_list_row_component.html.erb

@@ -0,0 +1,21 @@
+<tr>
+  <th scope="row" style="width: 50%;">
+    <a class="display-block maxw-full visited:text-blue text-underline truncate-text-ellipsis" href="<%= organization_path(@organization)%>">
+      <%= @organization.name %>
+    </a>
+  </th>
+  <td style="width: 16.67%;"> <%= @organization.npi %> </td>
+  <td style="width: 8.33%;">
+    <% if @link.ao? %>
+      AO
+    <% else %>
+      CD
+    <% end %>
+  </td>
+  <td style="width: 25%;">
+    <div class="clearfix">
+      <div class="float-left"><%= render Core::Icon::UswdsComponent.new(@icon, additional_classes: @classes) %></div>
+      <div class="float-left margin-left-1 margin-top-neg-2px"><%= @status %></div>
+    </div>
+  </td>
+</tr>

dpc-portal/app/components/core/card/organization_card_component.rb → dpc-portal/app/components/core/organization_list_row/organization_list_row_component.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Core
-  module Card
+  module OrganizationListRow
     # Render a USWDS-styled card for an organization.
-    class OrganizationCardComponent < ViewComponent::Base
+    class OrganizationListRowComponent < ViewComponent::Base
       include OrganizationUtils
       with_collection_parameter :link
 

dpc-portal/app/components/page/organization/organization_list_component.html.erb

@@ -1,16 +1,31 @@
 <div>
-<% if ao? %>
-  <h1>Welcome to the DPC Portal</h1>
-  <p>As an Authorized Official (AO), use this portal to manage access to Medicare claims data through the Data at the Point of Care (DPC) application programming interface (API)</p>
-  <div class="display-flex flex-row flex-justify">
-    <div class="flex-align-self-center">
-      <h2 class="margin-bottom-0">My organizations</h2>
-    </div>
+<h1>Welcome to the DPC Portal</h1>
+<p>Use this portal to manage your organization's access to Data at the Point of Care (DPC). Depending on your role, you can register your organization, sign terms of service, and complete API configuration.</p>
+<div class="display-flex flex-row flex-justify">
+  <div class="flex-align-self-center">
+    <h2 class="margin-bottom-0">My organizations</h2>
   </div>
-  <p>These are organizations for which you serve as an AO. Organizations cannot access Medicare claims data without an AO agreement to follow terms of service.</p>
+</div>
+<p>You’re designated as an Authorized Official (AO) and/or Credential Delegate (CD) of the following organizations. An AO is accountable for organization-level access to the API. The AO can can assign a CD to complete configuration steps on their behalf.</p>
+
+<% if @links.length %>
+  <table class="usa-table usa-table--borderless organizations-list table-bg-transparent" style="table-layout: fixed; width: 100%;">
+    <caption class="usa-sr-only">
+      A list of organizations you are affiliated with, including name, NPI-2, your role, and the status for API access.
+    </caption>
+    <thead>
+      <tr>
+        <th scope="col" style="width: 50%;">Organization Name</th>
+        <th scope="col" style="width: 16.67%;">NPI-2</th>
+        <th scope="col" style="width: 8.33%;">Role</th>
+        <th scope="col" style="width: 25%;">Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <%= render Core::OrganizationListRow::OrganizationListRowComponent.with_collection(@links)%>
+    </tbody>
+  </table>
 <% end %>
-<ul class="usa-card-group">
-   <%= render Core::Card::OrganizationCardComponent.with_collection(@links)%>
-</ul>
+
 <%=raw "<p>You don't have any organizations to show.</p>" if @links.blank? %>
 </div>

dpc-portal/app/components/page/organization/organization_list_component_preview.rb

@@ -12,24 +12,19 @@ module Organization
     class OrganizationListComponentPreview < ViewComponent::Preview
       OrgStruct = Struct.new(:name, :npi, :api_id)
 
-      def multiple_orgs_ao
-        links = []
-        3.times do |i|
-          org = ProviderOrganization.new(name: "Test Organization #{i}", npi: "#{i}111111111", id: i,
-                                         terms_of_service_accepted_at: 2.days.ago)
-          links << AoOrgLink.new(provider_organization: org)
-        end
-        render(Page::Organization::OrganizationListComponent.new(ao_or_cd: :ao, links:))
-      end
-
       def multiple_orgs
         links = []
-        3.times do |i|
-          org = ProviderOrganization.new(name: "Test Organization #{i}", npi: "#{i}111111111", id: i,
-                                         terms_of_service_accepted_at: 2.days.ago)
-          links << CdOrgLink.new(provider_organization: org)
-        end
-        render(Page::Organization::OrganizationListComponent.new(ao_or_cd: :cd, links:))
+        org = ProviderOrganization.new(name: 'Test Organization 0 - needs ToS', npi: '0111111111', id: 0,
+                                       terms_of_service_accepted_at: nil)
+        links << AoOrgLink.new(provider_organization: org)
+        org = ProviderOrganization.new(name: 'Test Organization 1 - configuration needed', npi: '1111111111', id: 1,
+                                       terms_of_service_accepted_at: 2.days.ago)
+        links << CdOrgLink.new(provider_organization: org)
+        org = ProviderOrganization.new(name: 'Test Organization 2 - configuration needed', npi: '2111111111', id: 2,
+                                       terms_of_service_accepted_at: 2.days.ago, config_complete: true)
+        links << AoOrgLink.new(provider_organization: org)
+
+        render(Page::Organization::OrganizationListComponent.new(ao_or_cd: :ao, links:))
       end
 
       def one_org

dpc-portal/app/concerns/organization_utils.rb

@@ -7,14 +7,17 @@ module OrganizationUtils
   included do
     def org_status(organization, link)
       message_prefix = link.is_a?(AoOrgLink) ? 'verification' : 'cd_access'
-      if organization.rejected?
-        ['lock', %i[text-gray-50], t("#{message_prefix}.#{organization.verification_reason}_status")]
-      elsif !link.verification_status?
-        ['lock', %i[text-gray-50], t("verification.#{link.verification_reason}_status")]
-      elsif organization.terms_of_service_accepted_at.blank?
-        ['warning', %i[text-gold], t("#{message_prefix}.tos_not_signed")]
+
+      if organization.terms_of_service_accepted_at.blank?
+        ['warning', %i[text-gold], t("#{message_prefix}.sign_tos")]
+      elsif organization.rejected?
+        ['lock', %i[text-gray-50], t("#{message_prefix}.access_denied")]
+      elsif link.user && !link.user.can_access?(organization)
+        ['link_off', %i[text-gray-50], t("#{message_prefix}.api_disabled")]
+      elsif !organization.config_complete
+        ['warning', %i[text-gold], t("#{message_prefix}.configuration_needed")]
       else
-        ['verified', %i[text-accent-cool], t("#{message_prefix}.manage_org")]
+        ['check', %i[text-green], t("#{message_prefix}.configuration_complete")]
       end
     end
   end

dpc-portal/app/models/ao_org_link.rb

@@ -16,4 +16,8 @@ class AoOrgLink < ApplicationRecord
   belongs_to :user, required: true
   belongs_to :provider_organization, required: true
   belongs_to :invitation, required: false
+
+  def ao?
+    true
+  end
 end

dpc-portal/app/models/cd_org_link.rb

@@ -15,4 +15,8 @@ def show_attributes
   def verification_status?
     disabled_at.blank?
   end
+
+  def ao?
+    false
+  end
 end

dpc-portal/config/locales/en.yml

@@ -36,13 +36,23 @@ en:
     server_error_text: We're experiencing a temporary outage due to an external system error. Please try again later. 
     manage_org: Manage your organization.
     tos_not_signed: You must sign DPC Terms of Service.
+    sign_tos: Sign terms of service
+    configuration_needed: Configuration needed
+    configuration_complete: Configuration complete
+    api_disabled: API disabled
+    access_denied: Access denied
   cd_access:
     no_approved_enrollment_status: This organization is not currently approved by Medicare.
     no_approved_enrollment_text: This organization must have an approved enrollment status with Medicare to access beneficiary claims data.
     org_med_sanctions_status: This organization is in the Medicare Exclusions Database.
     org_med_sanctions_text: This organization is listed as an excluded entity by the Office of Inspector General (OIG), which prohibits it from accessing beneficiary claims data.
     manage_org: Manage credentials.
     tos_not_signed: DPC Terms of Service not yet signed.
+    sign_tos: Sign terms of service
+    configuration_needed: Configuration needed
+    configuration_complete: Configuration complete
+    api_disabled: API disabled
+    access_denied: Access denied
   errors:
     attributes:
       base: