doable/app/views/projects/show.html.erb

<div class="bg-white shadow-sm rounded-lg overflow-hidden mb-8">
  <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
    <div class="flex justify-between items-center">
      <h1 class="text-2xl font-bold text-gray-900"><%= @project.name %></h1>
      <div class="flex space-x-2">
        <%= link_to edit_project_path(@project), class: "text-gray-400 hover:text-gray-500" do %>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
          </svg>
        <% end %>
      </div>
    </div>
    <% if @project.active? %>
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 mt-2">
        Active
      </span>
    <% else %>
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 mt-2">
        Inactive
      </span>
    <% end %>
  </div>
</div>

<div class="flex justify-between items-center mb-6">
  <h2 class="text-xl font-semibold text-gray-800">Todos for this project</h2>
  <%= link_to new_todo_path(project_id: @project.id), class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
    <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
    </svg>
    Add Todo
  <% end %>
</div>

<% if @project.todos.any? %>
  <div class="bg-white shadow overflow-hidden sm:rounded-md">
    <ul class="divide-y divide-gray-200">
      <% @project.todos.each do |todo| %>
        <li>
          <div class="px-4 py-4 sm:px-6 hover:bg-gray-50">
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <div class="min-w-0 flex-1 flex items-center">
                  <% if todo.completed %>
                    <span class="flex-shrink-0 h-5 w-5 text-green-500">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                      </svg>
                    </span>
                  <% else %>
                    <span class="flex-shrink-0 h-5 w-5 text-gray-300 border-2 border-gray-300 rounded-full"></span>
                  <% end %>
                  <div class="ml-4">
                    <p class="text-sm font-medium text-indigo-600 truncate"><%= link_to todo.name, todo_path(todo) %></p>
                    <p class="text-sm text-gray-500 truncate"><%= truncate(todo.description, length: 100) %></p>
                  </div>
                </div>
              </div>
              <div class="ml-4 flex-shrink-0 flex items-center space-x-4">
                <% if todo.priority && todo.priority > 0 %>
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                    Priority: <%= todo.priority %>
                  </span>
                <% end %>
                <%= link_to edit_todo_path(todo), class: "text-gray-400 hover:text-gray-500" do %>
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                  </svg>
                <% end %>
              </div>
            </div>
          </div>
        </li>
      <% end %>
    </ul>
  </div>
<% else %>
  <div class="text-center py-12 bg-white shadow overflow-hidden sm:rounded-md">
    <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
    </svg>
    <h3 class="mt-2 text-sm font-medium text-gray-900">No todos</h3>
    <p class="mt-1 text-sm text-gray-500">Get started by creating a new todo.</p>
    <div class="mt-6">
      <%= link_to new_todo_path(project_id: @project.id), class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
        Add a todo
      <% end %>
    </div>
  </div>
<% end %>

<div class="mt-8 flex space-x-4 items-center">
  <%= link_to "Back to Projects", projects_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
  <%= button_to "Delete Project", project_path(@project), method: :delete, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500", data: { confirm: "Are you sure you want to delete this project and all its todos?" } %>
</div>