dawarich/app/views/family_memberships/show.html.erb

<div class="container mx-auto px-4 py-8">
  <div class="max-w-3xl mx-auto">
    <!-- Header -->
    <div class="bg-white dark:bg-gray-800 shadow dark:shadow-gray-700 rounded-lg p-6 mb-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <div class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <span class="text-xl font-medium text-gray-700 dark:text-gray-200">
              <%= @membership.user.email.first.upcase %>
            </span>
          </div>

          <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
              <%= @membership.user.email %>
            </h1>
            <div class="flex items-center space-x-2 mt-1">
              <% if @membership.role == 'owner' %>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
                  Family Owner
                </span>
              <% else %>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
                  <%= @membership.role.humanize %>
                </span>
              <% end %>

              <% if @membership.user == current_user %>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
                  You
                </span>
              <% end %>
            </div>
          </div>
        </div>

        <div class="flex space-x-3">
          <%= link_to family_members_path(@family),
                class: "bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-md font-medium transition-colors duration-200" do %>
            ← All Members
          <% end %>

          <% if policy(@membership).destroy? && !@membership.owner? %>
            <%= link_to family_member_path(@family, @membership),
                  method: :delete,
                  confirm: "Are you sure you want to remove #{@membership.user.email} from the family?",
                  class: "bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200" do %>
              Remove Member
            <% end %>
          <% end %>
        </div>
      </div>
    </div>

    <!-- Member Details -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Basic Information -->
      <div class="bg-white dark:bg-gray-800 shadow dark:shadow-gray-700 rounded-lg p-6">
        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
          Basic Information
        </h2>

        <dl class="space-y-4">
          <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
              Email Address
            </dt>
            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100"><%= @membership.user.email %></dd>
          </div>

          <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
              Family Role
            </dt>
            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
              <%= @membership.role.humanize %>
              <% if @membership.role == 'owner' %>
                <span class="text-gray-500 dark:text-gray-400">
                  - Can manage family settings and members
                </span>
              <% end %>
            </dd>
          </div>

          <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
              Joined Date
            </dt>
            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
              <%= @membership.created_at.strftime('%B %d, %Y at %I:%M %p') %>
            </dd>
          </div>

          <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
              Time in Family
            </dt>
            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
              <%= time_ago_in_words(@membership.created_at) %>
            </dd>
          </div>
        </dl>
      </div>

      <!-- Family Information -->
      <div class="bg-white dark:bg-gray-800 shadow dark:shadow-gray-700 rounded-lg p-6">
        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
          Family Information
        </h2>

        <dl class="space-y-4">
          <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
              Family Name
            </dt>
            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100"><%= @family.name %></dd>
          </div>

          <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
              Family Creator
            </dt>
            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100"><%= @family.creator.email %></dd>
          </div>

          <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
              Family Created
            </dt>
            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
              <%= @family.created_at.strftime('%B %d, %Y') %>
            </dd>
          </div>

          <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
              Total Members
            </dt>
            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
              <%= pluralize(@family.members.count, 'member') %>
            </dd>
          </div>
        </dl>
      </div>
    </div>

    <!-- Actions and Warnings -->
    <div class="mt-6 space-y-4">
      <!-- Owner-specific Warning -->
      <% if @membership.owner? %>
        <div class="bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700 rounded-md p-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                Family Owner Protection
              </h3>
              <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                <p>
                  Family owners cannot remove their own membership. To leave the family, the owner must delete the entire family instead.
                </p>
              </div>
            </div>
          </div>
        </div>
      <% end %>

      <!-- Self-removal Info -->
      <% if @membership.user == current_user %>
        <div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-md p-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                Your Membership
              </h3>
              <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                <p>
                  This is your own membership. <% if @membership.owner? %>As the owner, you can delete the family to leave it.<% else %>You can leave the family at any time from the family page.<% end %>
                </p>
              </div>
              <div class="mt-3">
                <%= link_to family_path(@family),
                      class: "text-blue-800 hover:text-blue-900 dark:text-blue-200 dark:hover:text-blue-100 font-medium" do %>
                  Go to Family Page →
                <% end %>
              </div>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>