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 %>
              <%= icon 'square-pen', class: "inline-block w-4 h-4 mr-2 -mt-1" %>
              <%= t('families.show.edit', default: 'Edit') %>
            <% end %>
          <% end %>

          <% if policy(@family).leave? && !current_user.family_owner? %>
            <%= 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 %>
              <%= icon 'trash-2', class: "inline-block w-4 h-4 mr-2 -mt-1" %>
              Delete
            <% end %>
          <% end %>
        </div>
      </div>
    </div>

    <!-- Family Members -->
    <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 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>
        </div>

        <div class="space-y-3">
          <% @members.each do |member| %>
            <!-- DaisyUI Card for each member -->
            <div class="card bg-base-200 shadow-sm">
              <div class="card-body p-4">
                <div class="flex items-center justify-between">
                  <div class="flex-grow">
                    <!-- Member Info -->
                    <div class="flex items-center gap-3">
                      <div class="avatar placeholder">
                        <div class="bg-primary text-primary-content rounded-full w-12">
                          <span class="text-lg font-semibold">
                            <%= member.email&.first&.upcase || '?' %>
                          </span>
                        </div>
                      </div>

                      <div>
                        <h3 class="card-title text-base"><%= member.email %></h3>
                        <div class="flex items-center gap-2 mt-1">
                          <% if member.family_membership.role == 'owner' %>
                            <div class="badge badge-warning badge-sm">
                              <%= t('families.show.owner_badge', default: 'Owner') %>
                            </div>
                          <% else %>
                            <span class="text-sm opacity-60">
                              <%= member.family_membership.role.humanize %>
                            </span>
                          <% end %>
                        </div>
                        <div class="text-xs opacity-50 mt-1">
                          <%= t('families.show.joined_on', default: 'Joined') %>
                          <%= member.family_membership.created_at.strftime('%b %d, %Y') %>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Location Sharing Controls - More Compact -->
                  <div class="ml-auto flex items-center gap-4">
                    <% if member == current_user %>
                      <!-- Own toggle - interactive (consolidated controller) -->
                      <div data-controller="location-sharing-toggle"
                           data-location-sharing-toggle-member-id-value="<%= member.id %>"
                           data-location-sharing-toggle-enabled-value="<%= member.family_sharing_enabled? %>"
                           data-location-sharing-toggle-family-id-value="<%= @family.id %>"
                           data-location-sharing-toggle-duration-value="<%= member.family_sharing_duration %>"
                           data-location-sharing-toggle-expires-at-value="<%= member.family_sharing_expires_at&.iso8601 %>"
                           class="flex items-center gap-3">

                        <span class="text-sm opacity-60">Location:</span>

                        <!-- Toggle Switch -->
                        <input type="checkbox"
                               class="toggle toggle-primary toggle-sm"
                               <%= 'checked' if member.family_sharing_enabled? %>
                               data-location-sharing-toggle-target="checkbox"
                               data-action="change->location-sharing-toggle#toggle">

                        <!-- Duration Dropdown (only visible when enabled) -->
                        <div class="<%= 'hidden' unless member.family_sharing_enabled? %>"
                             data-location-sharing-toggle-target="durationContainer">
                          <select class="select select-bordered select-xs w-28 h-full"
                                  data-location-sharing-toggle-target="durationSelect"
                                  data-action="change->location-sharing-toggle#changeDuration">
                            <option value="permanent" <%= 'selected' if member.family_sharing_duration == 'permanent' %>>Always</option>
                            <option value="1h" <%= 'selected' if member.family_sharing_duration == '1h' %>>1 hour</option>
                            <option value="6h" <%= 'selected' if member.family_sharing_duration == '6h' %>>6 hours</option>
                            <option value="12h" <%= 'selected' if member.family_sharing_duration == '12h' %>>12 hours</option>
                            <option value="24h" <%= 'selected' if member.family_sharing_duration == '24h' %>>24 hours</option>
                          </select>
                        </div>

                        <!-- Expiration Info (inline) -->
                        <% if member.family_sharing_enabled? && member.family_sharing_expires_at.present? %>
                          <div class="text-xs opacity-50"
                               data-location-sharing-toggle-target="expirationInfo">
                            • Expires <%= time_ago_in_words(member.family_sharing_expires_at) %> from now
                          </div>
                        <% end %>
                      </div>

                    <% else %>
                      <!-- Other member's status - read-only indicator -->
                      <div class="flex items-center gap-2">
                        <span class="text-sm opacity-60">Location:</span>
                        <% if member.family_sharing_enabled? %>
                          <div class="w-3 h-3 bg-success rounded-full animate-pulse"></div>
                          <span class="text-xs text-success font-medium">
                            <%= member.family_sharing_duration == 'permanent' ? 'Always' : member.family_sharing_duration&.upcase %>
                          </span>
                          <% if member.family_sharing_expires_at.present? %>
                            <span class="text-xs opacity-50">
                              • Expires <%= time_ago_in_words(member.family_sharing_expires_at) %> from now
                            </span>
                          <% end %>
                        <% else %>
                          <div class="w-3 h-3 bg-base-300 rounded-full"></div>
                          <span class="text-xs opacity-50">Disabled</span>
                        <% end %>
                      </div>
                    <% end %>
                  </div>
                </div>
              </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,
                        data: { confirm: 'Are you sure you want to cancel this invitation?', turbo_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? && @family.can_add_members? %>
          <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>
        <% elsif policy(@family).invite? %>
          <!-- Family at capacity message -->
          <div class="border-t pt-4">
            <div class="bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 rounded-md p-4">
              <div class="flex">
                <div class="flex-shrink-0">
                  <svg class="h-5 w-5 text-amber-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-amber-800 dark:text-amber-200">
                    Family at Capacity
                  </h3>
                  <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
                    <p>
                      Your family has reached the maximum of <%= @family.class::MAX_MEMBERS %> members (including pending invitations).
                      Cancel existing invitations or wait for them to expire to invite new members.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <% end %>
    </div>
  </div>
</div>