baclight/app/views/employers/index.html.erb

<div class="bg-deepcove h-full w-full flex flex-col justify-start">
  <div class="flex items-center justify-between">
    <h1 class="font-bold text-4xl text-platinum my-5">Employers</h1>
    <div class="w-30 inline-flex flex-col text-platinum hover:text-limegreen font-bold px-4 mr-20 rounded-l-lg border-l-5 border-b-2 border-limegreen">
      <div class="w-full flex text-3xl">
        <%= link_to "NEW", new_employer_path %>
      </div>
    </div>
  </div>
  <% if @uninitialized.present? %>
    <h2 class="font-bold text-3xl text-brightlava my-5">In Process:</h2>
    <div class="flex flex-none items-center w-full px-10">
      <h3 class="flex-none font-bold text-xl text-bronze my-5">
        <%= "Waiting for Groups Number Entry" %>
      </h2>
      <% if @uninitialized.not_automation_ready.present? %>
        <div class="flex flex-wrap w-full gap-x-4 gap-y-3">
          <% @uninitialized.not_automation_ready.each do |emp| %>
            <div class="w-[23%] inline-flex flex-col text-platinum font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-bronze">
              <div class="w-full flex text-xl">
                <%= link_to emp.name, employer_path(emp.slug), class: "text-bronze hover:text-platinum" %>
              </div>
              <div class="w-full flex text-md font-medium">
                <%= "(Effective #{emp.effective_date})" %>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="grow h-[1px] mt-2 ml-1 bg-bronze"></div>
      <% end %>
    </div>
    <div class="flex flex-none items-center w-full px-10">
      <h3 class="font-bold text-xl text-verdigris-vivid my-5">
        <%= "Waiting for Employer to be created in VHCS" %>
      </h3>
      <% if @uninitialized.missing_keychain_initialization.present? %>
        <div class="flex flex-wrap w-full pl-20 pr-10 gap-x-4 gap-y-3">
          <% @uninitialized.missing_keychain_initialization.each do |emp| %>
            <div class="w-[23%] inline-flex flex-col text-platinum font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-verdigris-vivid">
              <div class="w-full flex text-xl">
                <%= link_to emp.name, employer_path(emp.slug), class: "text-verdigris-vivid hover:text-platinum" %>
              </div>
              <div class="w-full flex text-md font-medium">
                <%= "(Effective #{emp.effective_date})" %>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="grow h-[1px] mt-2 ml-1 bg-verdigris-vivid"></div>
      <% end %>
    </div>
    <div class="flex flex-none items-center w-full px-10">
      <h3 class="font-bold text-xl text-copper my-5">
        <%= "Waiting for Plans to be created in VHCS" %>
      </h3>
      <% if @uninitialized.missing_plans_initialization.present? %>
        <div class="flex flex-wrap w-full pl-20 pr-10 gap-x-4 gap-y-3">
          <% @uninitialized.missing_plans_initialization.each do |emp| %>
            <div class="w-[23%] inline-flex flex-col text-platinum font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-copper">
              <div class="w-full flex text-xl">
                <%= link_to emp.name, employer_path(emp.slug), class: "text-copper hover:text-platinum" %>
              </div>
              <div class="w-full flex text-md font-medium">
                <%= "(Effective #{emp.effective_date})" %>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="grow h-[1px] mt-2 ml-1 bg-copper"></div>
      <% end %>
    </div>
    <div class="flex flex-none items-center w-full px-10">
      <h3 class="flex flex-none font-bold text-xl text-bluemana my-5">
        <%= "Waiting for Inital Members to be created in VHCS" %>
      </h3>
      <% if @uninitialized.missing_members_initialization.present? %>
        <div class="flex flex-wrap w-full pl-20 pr-10 gap-x-4 gap-y-3">
          <% @uninitialized.missing_members_initialization.each do |emp| %>
            <div class="w-[23%] inline-flex flex-col text-platinum font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-bluemana">
              <div class="w-full flex">
                <%= link_to emp.name, employer_path(emp.slug), class: "text-bluemana hover:text-platinum" %>
              </div>
              <div class="w-full flex justify-between text-md font-medium">
                <% member_counter_color = "text-".concat(emp.members.present? ? "limegreen" : "brightlava") %>
                <div>
                  Members: 
                  <span class="ml-2 <%= member_counter_color %>">
                    <%= emp.members.count %>
                  </span>
                </div>
                <div class="ml-2">
                  <%= "(Effective #{emp.effective_date})" %>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="grow h-[1px] mt-2 ml-1 bg-bluemana"></div>
      <% end %>
    </div>
  <% end %>
  <h2 class="font-bold text-3xl text-limegreen my-5">Live:</h2>
  <div class="flex flex-wrap w-full px-10 gap-x-4 gap-y-3">
    <% @with_active_id_card_setup.order(:name).each do |emp| %>
      <div class="w-[23%] inline-flex flex-col text-platinum font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-atmosphere">
        <div class="w-full flex text-xl space-x-4">
          <%= link_to emp.name, employer_path(emp.slug), class: "text-atmosphere hover:text-platinum" %>
        </div>
        <div class="w-full flex text-md font-medium space-x-2">
          <div>
            Members: 
            <span class="ml-2">
              <%= emp.members.count %>
            </span>
          </div>
        </div>
      </div>
    <% end %>
  </div>
  <h2 class="font-bold text-3xl text-[#ADADAD] my-5">Deactivated:</h2>
  <div class="flex flex-wrap w-full px-10 gap-x-4 gap-y-3">
    <% @deactivated.each do |emp| %>
      <div class="w-[23%] inline-flex flex-col text-[#ADADAD] font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-[#ADADAD]">
        <div class="w-full flex text-xl space-x-4">
          <%= link_to emp.name, employer_path(emp.slug), class: "text-platinum hover:text-bluemana" %>
        </div>
        <div class="w-full flex text-md font-medium space-x-2">
          <div>
            Members: 
            <span class="ml-2">
              <%= emp.members.count %>
            </span>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>