Edit user page and category

app/controllers/application_controller.rb

@@ -3,4 +3,13 @@ class ApplicationController < ActionController::Base
   allow_browser versions: :modern
 
   before_action :authenticate_user!
+
+  before_action :configure_permitted_parameters, if: :devise_controller?
+
+  protected
+
+  def configure_permitted_parameters
+    devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :avatar, :hours_per_week])
+    devise_parameter_sanitizer.permit(:account_update, keys: [:name, :avatar, :hours_per_week])
+  end
 end

app/controllers/categories_controller.rb

@@ -1,15 +1,11 @@
 class CategoriesController < ApplicationController
-  before_action :set_category, only: %i[ show edit update destroy ]
+  before_action :set_category, only: %i[ edit update destroy ]
 
   # GET /categories or /categories.json
   def index
     @categories = Category.all
   end
 
-  # GET /categories/1 or /categories/1.json
-  def show
-  end
-
   # GET /categories/new
   def new
     @category = Category.new
@@ -25,8 +21,7 @@ def create
 
     respond_to do |format|
       if @category.save
-        format.html { redirect_to @category, notice: "Category was successfully created." }
-        format.json { render :show, status: :created, location: @category }
+        format.html { redirect_to new_task_path, notice: "Category was successfully created." }
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @category.errors, status: :unprocessable_entity }
@@ -38,8 +33,7 @@ def create
   def update
     respond_to do |format|
       if @category.update(category_params)
-        format.html { redirect_to @category, notice: "Category was successfully updated." }
-        format.json { render :show, status: :ok, location: @category }
+        format.html { redirect_to categories_path, notice: "Category was successfully updated." }
       else
         format.html { render :edit, status: :unprocessable_entity }
         format.json { render json: @category.errors, status: :unprocessable_entity }

app/views/categories/_category.html.erb

@@ -3,10 +3,4 @@
     <strong class="block font-medium mb-1">Name:</strong>
     <%= category.name %>
   </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Description:</strong>
-    <%= category.description %>
-  </p>
-
 </div>

app/views/categories/edit.html.erb

@@ -1,8 +1,6 @@
 <div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">Editing category</h1>
+  <h1 class="font-bold text-4xl">Editar categoria</h1>
 
   <%= render "form", category: @category %>
 
-  <%= link_to "Show this category", @category, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-  <%= link_to "Back to categories", categories_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
 </div>

app/views/categories/index.html.erb

@@ -1,21 +1,42 @@
-<div class="w-full">
-  <% if notice.present? %>
-    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
-  <% end %>
-
-  <% content_for :title, "Categories" %>
+<% if notice.present? %>
+  <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
+<% end %>
 
-  <div class="flex justify-between items-center">
-    <h1 class="font-bold text-4xl">Categories</h1>
-    <%= link_to "New category", new_category_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
-  </div>
+<% content_for :title, "Categorias" %>
 
-  <div id="categories" class="min-w-full">
-    <% @categories.each do |category| %>
-      <%= render category %>
-      <p>
-        <%= link_to "Show this category", category, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-      </p>
-    <% end %>
-  </div>
+<div class="flex justify-between items-center mb-6">
+  <h1 class="font-bold text-4xl text-blue-500">Categorias</h1>
+  <%= link_to "Cadastrar categoria", new_category_path, class: "rounded-lg py-3 px-5 bg-blue-400 hover:bg-blue-500 text-white block font-medium" %>
 </div>
+
+<div id="categories" class="w-full">
+  <% if @categories.any? %>
+    <table class="min-w-full divide-y divide-gray-200">
+      <thead class="bg-blue-50">
+        <tr>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+        <% @categories.each do |category| %>
+          <tr id="<%= dom_id category %>">
+            <td class="px-6 py-4 whitespace-nowrap">
+              <div class="text-sm text-gray-900"><%= category.name %></div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-left text-sm font-medium">
+              <%= link_to edit_category_path(category), class: "ml-2 rounded-lg py-2 px-4 text-blue-600 hover:bg-gray-100 inline-block font-medium cursor-pointer" do %>
+                <%= lucide_icon('file-pen-line', class: 'inline-block text-blue-600 cursor-pointer') %>
+              <% end %>
+              <%= link_to category, method: :delete, class: "ml-2 rounded-lg py-2 px-4 text-blue-600 hover:bg-gray-100 inline-block font-medium cursor-pointer", data: { turbo_method: :delete, turbo_confirm: "Tem certeza?" } do %>
+                <%= lucide_icon('circle-x', class: 'inline-block text-red-600 cursor-pointer') %>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% else %>
+    <p>Nenhum sintoma registrado</p>
+  <% end %>
+</div>

app/views/categories/new.html.erb

@@ -1,7 +1,6 @@
 <div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">New category</h1>
+  <h1 class="font-bold text-4xl">Nova categoria</h1>
 
   <%= render "form", category: @category %>
 
-  <%= link_to "Back to categories", categories_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
 </div>

app/views/devise/registrations/edit.html.erb

@@ -1,43 +1,72 @@
-<h2>Edit <%= resource_name.to_s.humanize %></h2>
-
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
-
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
-
-  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
-    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
-  <% end %>
-
-  <div class="field">
-    <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
-    <% if @minimum_password_length %>
-      <br />
-      <em><%= @minimum_password_length %> characters minimum</em>
+<div class="container flex animate-up delay-2">
+  <aside class="card bg-white border border-gray-300 rounded-lg p-8 text-center mr-8 justify-center flex flex-col items-center">
+    <% if resource.avatar? %>
+      <img src="<%= resource.avatar %>" alt="Avatar" class="rounded-full border-yellow-500 border-4 border-secondary w-28 h-28 mb-4" />
+    <% else %>
+      <%= lucide_icon('user-round', class: "rounded-full border-yellow-500 border-4 border-secondary w-28 h-28 mb-4") %>
     <% end %>
-  </div>
+    <h2 class="text-2xl font-semibold mb-4"><%= resource.name %></h2>
+    <p class="text-lg">
+      Quantidade de horas que trabalha na semana: <br />
+      <strong><%= resource.hours_per_week %></strong>
+    </p>
 
-  <div class="field">
-    <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-  </div>
+    <div class="flex flex-col items-center mt-4 space-y-4">
+      <%= link_to "Ver compromissos anteriores", root_path, class: "text-blue-400 font-semibold rounded transition duration-200 hover:text-blue-500" %>
+      <%= link_to "Histórico de modificações", root_path, class: "text-blue-400 font-semibold rounded transition duration-200 hover:text-blue-500" %>
+      <%= link_to "Categorias cadastradas", categories_path, class: "text-blue-400 font-semibold rounded transition duration-200 hover:text-blue-500" %>
+    </div>
 
-  <div class="field">
-    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
-    <%= f.password_field :current_password, autocomplete: "current-password" %>
-  </div>
+  </aside>  
+  <main class="flex-1">
+    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: 'space-y-4' }) do |f| %>
+      <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="actions">
-    <%= f.submit "Update" %>
-  </div>
-<% end %>
+      <div class="field">
+        <%= f.label :name, class: 'block font-semibold' %>
+        <%= f.text_field :name, class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Seu nome" %>
+      </div>
 
-<h3>Cancel my account</h3>
+      <div class="field">
+        <%= f.label :email, class: 'block font-semibold' %>
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Seu email" %>
+      </div>
 
-<div>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?", turbo_confirm: "Are you sure?" }, method: :delete %></div>
+      <div class="field">
+        <%= f.label :avatar, class: 'block font-semibold' %>
+        <%= f.url_field :avatar, class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "URL da imagem (ex: https://github.com/eltonsantos.png)" %>
+      </div>
 
-<%= link_to "Back", :back %>
+      <div class="field">
+        <%= f.label :hours_per_week, class: 'block font-semibold' %>
+        <%= f.text_field :hours_per_week, class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Quantidade de horas trabalhadas por semana" %>
+      </div>
+
+      <div class="field">
+        <%= f.label :password, class: 'block font-semibold' %>
+        <%= f.password_field :password, autocomplete: "new-password", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Nova senha (deixe em branco para não alterar)" %>
+      </div>
+
+      <div class="field">
+        <%= f.label :password_confirmation, class: 'block font-semibold' %>
+        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Confirme a nova senha" %>
+      </div>
+
+      <div class="field">
+        <%= f.label :current_password, class: 'block font-semibold' %>
+        <%= f.password_field :current_password, autocomplete: "current-password", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Senha atual" %>
+      </div>
+
+      <div class="actions mt-4">
+        <%= f.submit "Atualizar", class: 'bg-blue-600 text-white font-semibold py-2 px-4 rounded' %>
+      </div>
+    <% end %>
+
+    <h3 class="text-lg font-semibold mt-6">Cancelar minha conta</h3>
+    <div>
+      Unhappy? <%= button_to "Cancelar minha conta", registration_path(resource_name), data: { confirm: "Você tem certeza?" }, method: :delete, class: 'text-red-600' %>
+    </div>
+
+    <%= link_to "Voltar", :back, class: 'mt-4 text-blue-500' %>
+  </main>
+</div>

app/views/layouts/application.html.erb

@@ -30,9 +30,9 @@
               <%= lucide_icon('triangle-alert', class: 'text-yellow-300 mr-2') %>
               Você tem 3 horas livres no seu dia
             </span>
-            <a href="/profile" id="avatar-profile" class="flex items-center justify-center">
+            <a href="<%= edit_user_registration_path %>" id="avatar-profile" class="flex items-center justify-center">
               <p class="mr-2 text-end">
-                <b>Elton Santos</b>
+                <b><%= current_user.name %></b>
                 <br />
                 <span class="text-gray-30">Ver perfil</span>
               </p>
@@ -45,7 +45,7 @@
       <section id="summary" class="bg-stone-800 text-white h-25">
         <div class="container mx-auto p-4 flex justify-between border-t border-stone-700" style="max-width: 1224px;">
           <h2 class="sr-only">Sumário</h2>
-          <div class="grid grid-cols-3 gap-4">
+          <div class="grid grid-cols-5">
             <div class="bg-gray p-4">
               <strong>5</strong>
               Tarefas ao total
@@ -56,7 +56,15 @@
             </div>
             <div class="bg-gray p-4">
               <strong>3</strong>
-              Encerradas
+              Concluídas
+            </div>
+            <div class="bg-gray p-4">
+              <strong>0</strong>
+              Arquivadas
+            </div>
+            <div class="bg-gray p-4">
+              <strong>50%</strong>
+              Progresso
             </div>
           </div>
           <% if current_user.has_active_commitments? %>
@@ -77,7 +85,7 @@
         </div>
       </section>
 
-      <main class="mx-auto p-4 flex justify-between items-center" style="max-width: 1224px;">
+      <main class="mx-auto p-4 items-center" style="max-width: 1224px;">
         <%= yield %>
       </main>
     <% else %>

db/migrate/20240925034633_devise_create_users.rb

@@ -8,6 +8,7 @@ def change
       t.string :email,              null: false, default: ""
       t.string :encrypted_password, null: false, default: ""
       t.decimal :hours_per_week,    precision: 5, scale: 2, null: false
+      t.string :avatar
 
       ## Recoverable
       t.string   :reset_password_token