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

<div class="container mx-auto px-4 py-8">
  <div class="max-w-4xl mx-auto">
    <!-- Family 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>
          <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100"><%= @family.name %></h1>
          <p class="text-gray-600 dark:text-gray-400 mt-1">
            <%= t('families.show.created_by', default: 'Created by') %>
            <%= @family.creator.email %>
            <%= t('families.show.on_date', default: 'on') %>
            <%= @family.created_at.strftime('%B %d, %Y') %>
          </p>
        </div>

        <div class="flex space-x-3">
          <% if policy(@family).update? %>
            <%= link_to edit_family_path(@family),
                  class: "bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200" do %>
              <%= t('families.show.edit', default: 'Edit Family') %>
            <% end %>
          <% end %>

          <% if policy(@family).leave? %>
            <%= link_to leave_family_path(@family),
                  method: :delete,
                  data: { confirm: 'Are you sure you want to leave this family?', turbo_confirm: 'Are you sure you want to leave this 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 %>
              Leave Family
            <% end %>
          <% end %>

          <% if policy(@family).destroy? %>
            <%= link_to family_path(@family),
                  method: :delete,
                  data: { confirm: 'Are you sure you want to delete this family? This action cannot be undone.', turbo_confirm: 'Are you sure you want to delete this family? This action cannot be undone.' },
                  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 %>
              Delete Family
            <% end %>
          <% end %>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Family Members -->
      <div class="bg-white dark:bg-gray-800 shadow dark:shadow-gray-700 rounded-lg p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
            <%= t('families.show.members_title', default: 'Family Members') %>
            <span class="text-sm font-normal text-gray-500 dark:text-gray-400">(<%= @members.count %>)</span>
          </h2>
          <%= link_to family_members_path(@family),
                class: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-sm font-medium" do %>
            <%= t('families.show.manage_members', default: 'Manage') %>
          <% end %>
        </div>

        <div class="space-y-3">
          <% @members.each do |member| %>
            <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
              <div>
                <div class="font-medium text-gray-900 dark:text-gray-100"><%= member.email %></div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  <%= member.family_membership.role.humanize %>
                  <% if member.family_membership.role == 'owner' %>
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 ml-2">
                      <%= t('families.show.owner_badge', default: 'Owner') %>
                    </span>
                  <% end %>
                </div>
              </div>
              <div class="text-sm text-gray-500 dark:text-gray-400">
                <%= t('families.show.joined_on', default: 'Joined') %>
                <%= member.family_membership.created_at.strftime('%b %d, %Y') %>
              </div>
            </div>
          <% end %>
        </div>
      </div>

      <!-- Pending Invitations -->
      <div class="bg-white dark:bg-gray-800 shadow dark:shadow-gray-700 rounded-lg p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
            <%= t('families.show.invitations_title', default: 'Pending Invitations') %>
            <span class="text-sm font-normal text-gray-500 dark:text-gray-400">(<%= @pending_invitations.count %>)</span>
          </h2>
        </div>

        <% if @pending_invitations.any? %>
          <div class="space-y-3 mb-4">
            <% @pending_invitations.each do |invitation| %>
              <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div>
                  <div class="font-medium text-gray-900 dark:text-gray-100"><%= invitation.email %></div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">
                    <%= t('families.show.invited_on', default: 'Invited') %>
                    <%= invitation.created_at.strftime('%b %d, %Y') %>
                  </div>
                  <div class="text-xs text-gray-400 dark:text-gray-500">
                    <%= t('families.show.expires_on', default: 'Expires') %>
                    <%= invitation.expires_at.strftime('%b %d, %Y at %I:%M %p') %>
                  </div>
                </div>
                <% if policy(@family).manage_invitations? %>
                  <%= link_to family_invitation_path(@family, invitation),
                        method: :delete,
                        confirm: 'Are you sure you want to cancel this invitation?',
                        class: "text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 text-sm font-medium" do %>
                    Cancel
                  <% end %>
                <% end %>
              </div>
            <% end %>
          </div>
        <% else %>
          <p class="text-gray-500 dark:text-gray-400 text-center py-4">
            <%= t('families.show.no_pending_invitations', default: 'No pending invitations') %>
          </p>
        <% end %>

        <!-- Invite New Member -->
        <% if policy(@family).invite? %>
          <div class="border-t pt-4">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-3">
              <%= t('families.show.invite_member', default: 'Invite New Member') %>
            </h3>

            <%= form_with model: [@family, FamilyInvitation.new], url: family_invitations_path(@family), local: true, class: "space-y-3" do |form| %>
              <div>
                <%= form.label :email, t('families.show.email_label', default: 'Email Address'), class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" %>
                <%= form.email_field :email,
                      placeholder: t('families.show.email_placeholder', default: 'Enter email address'),
                      class: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %>
              </div>

              <div class="flex justify-end">
                <%= form.submit t('families.show.send_invitation', default: 'Send Invitation'),
                      class: "bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200" %>
              </div>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>