Fix UI and accessibility and check and resolve all found errors

Author: Nemwel-Boniface

app/controllers/milestones_controller.rb

@@ -3,10 +3,10 @@ class MilestonesController < ApplicationController
   before_action :set_milestone
 
   def toggle_paid
-    @milestone.update(paid: params[:paid] == "1")
+    @milestone.update(paid: params[:paid] == '1')
     respond_to do |format|
       format.html { redirect_back fallback_location: product_path(@milestone.product), notice: "Milestone with status '#{@milestone.status&.name}' is now paid." }
-      format.js   # For remote: true handling
+      format.js # For remote: true handling
     end
   end
 

app/views/product/show.html.erb

@@ -17,52 +17,68 @@
   <div class="gap-6 flex justify-between">
     <!-- First Column: List milestones -->
     <div class="px-16 grid grid-cols-1 gap-4 col-span-1 w-1/2">
-  <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Milestones</h2>
-  <% if @product.milestones.any? %>
-    <ul class="space-y-3">
-      <% @product.milestones.each do |milestone| %>
-        <li class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm">
-          <p class="text-sm text-gray-800 dark:text-white">
-            <strong>Status:</strong> <%= milestone.status&.name || 'N/A' %>
-          </p>
-          <p class="text-sm text-gray-800 dark:text-white">
-            <strong>Percentage:</strong> <%= milestone.percentage %>%
-          </p>
-          <% if @product.budget.present? %>
-            <p class="text-sm text-gray-800 dark:text-white">
-              <strong>Amount:</strong> KES <%= number_with_precision(@product.budget * milestone.percentage.to_f / 100, precision: 2) %>
-            </p>
-          <% end %>
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Milestones</h2>
+      <% if @product.milestones.any? %>
+        <ul class="space-y-3">
+          <% @product.milestones.each do |milestone| %>
+            <li class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm">
+              <p class="text-sm text-gray-800 dark:text-white">
+                <strong>Status:</strong> <%= milestone.status&.name || 'N/A' %>
+              </p>
+              <p class="text-sm text-gray-800 dark:text-white">
+                <strong>Percentage:</strong> <%= milestone.percentage %>%
+              </p>
+              <% if @product.budget.present? %>
+                <p class="text-sm text-gray-800 dark:text-white">
+                  <strong>Amount:</strong> KES <%= number_with_precision(@product.budget * milestone.percentage.to_f / 100, precision: 2) %>
+                </p>
+              <% end %>
 
-          <!-- Paid Toggle -->
-          <div class="mt-2">
-            <%= form_with url: toggle_paid_milestone_path(milestone), method: :patch, local: true, remote: true do |form| %>
-              <div class="flex items-center">
-                <label class="relative inline-block w-16 h-8">
-                  <%= form.check_box :paid,
-                        checked: milestone.paid,
-                        class: "hidden",
-                        disabled: milestone.paid?, # lock once paid
-                        onchange: milestone.paid? ? nil : 'this.form.submit()' %>
-
-                  <span class="absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 rounded-full transition duration-300"></span>
-                  <span class="absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition duration-300 transform"></span>
-                </label>
-                <span class="ml-3 text-sm text-gray-800 dark:text-white">
-                  Paid
-                </span>
+              <!-- Paid Toggle -->
+              <div class="mt-2">
+                <%= form_with url: toggle_paid_milestone_path(milestone), method: :patch, local: true, remote: true do |form| %>
+                  <div class="flex items-center space-x-3">
+                    
+                    <!-- Switch -->
+                    <label class="relative inline-block w-16 h-8">
+                      <%= form.check_box :paid,
+                            checked: milestone.paid,
+                            class: "hidden peer",
+                            disabled: milestone.paid?,
+                            onchange: milestone.paid? ? nil : 'this.form.submit()' %>
+
+                      <!-- Background -->
+                      <span class="absolute top-0 left-0 right-0 bottom-0 bg-gray-300 rounded-full transition duration-300 peer-checked:bg-green-500"></span>
+
+                      <!-- Knob -->
+                      <span class="absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition duration-300 transform peer-checked:translate-x-8"></span>
+                    </label>
+
+                    <!-- Label Text -->
+                    <span class="text-sm text-gray-800 dark:text-white">
+                      Paid
+                      <span class="text-xs text-gray-500 block">
+                        <% if milestone.paid? %>
+                          This milestone has been paid and cannot be changed.
+                        <% else %>
+                          Once marked as paid, it cannot be undone.
+                        <% end %>
+                      </span>
+                    </span>
+
+                  </div>
+                <% end %>
               </div>
-            <% end %>
-          </div>
 
 
-        </li>
+
+            </li>
+          <% end %>
+        </ul>
+      <% else %>
+        <p class="text-gray-500 dark:text-gray-400">No milestones available for this product.</p>
       <% end %>
-    </ul>
-  <% else %>
-    <p class="text-gray-500 dark:text-gray-400">No milestones available for this product.</p>
-  <% end %>
-</div>
+    </div>
 
 
     <!-- Fourth Column: Documents -->