changing profile page

Users can now see the items they have listed and its related information, including who has purchased the item. Also added CSS to make the table for both listed items and order history more readable.

app/assets/stylesheets/auth.css

@@ -141,9 +141,4 @@ body {
 
 .home-link:hover {
   color: #3498db;
-}
-
-/* Add padding to main content when on profile page */
-body.profile-page {
-  padding-top: 35px;  /* Adjust this value as needed */
 }

app/assets/stylesheets/profile.css

@@ -0,0 +1,25 @@
+/* Add padding to main content when on profile page */
+body.profile-page {
+    padding-top: 35px;  /* Adjust this value as needed */
+}
+
+.profile-table {
+    border-collapse: separate;
+    border-spacing: 20px 0;
+}
+
+  .profile-table th,
+  .profile-table td {
+    padding-bottom: 15px;
+    text-align: left;
+  }
+
+  .wrapped-item {
+    word-wrap: break-word;
+    max-width: 300px;
+  }
+
+  .wrapped-description {
+    word-wrap: break-word;
+    max-width: 300px;
+  }

app/controllers/user_controller.rb

@@ -21,5 +21,6 @@ def handle_register
 
     def show_profile        
         @orders = Order.includes(:item).where(user_id: session[:user]['id'])
+        @listed_items = Item.where(user_id: session[:user]['id']).order(created_at: :desc)
     end
 end

app/views/user/show_profile.html.erb

@@ -1,7 +1,48 @@
-<h1><%= @username %></h1>
-<h2><strong>Your Order History:</strong></h2>
+<h1><%= @username%>'s  Profile</h1>
 
-<table>
+<h2><strong>Your Listed Items:</strong></h2>
+<% if @listed_items.empty? %>
+  <p>No items listed yet.</p>
+<% else %>
+<table class="profile-table">
+  <thead>
+    <tr>
+      <th>Item Name</th>
+      <th>Price</th>
+      <th>Description</th>
+      <th>Remaining Quantity</th>
+      <th>Purchased By</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% @listed_items.each do |item| %>
+      <tr>
+        <td class="wrapped-item"><%= item.name %></td>
+        <td><%= item.price %></td>
+        <td class="wrapped-description"><%= item.description %></td>
+        <td><%= item.remaining_quantity %></td>
+        <td>
+        <% if item.orders.any? %>
+            <ul style="list-style-type: none; padding-left: 0;">
+              <% item.orders.each do |order| %>
+                <li><%= order.user.username %> (Qty: <%= order.quantity %>)</li>
+              <% end %>
+            </ul>
+          <% else %>
+            No purchases yet
+          <% end %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+<% end %>
+
+<h2><strong>Your Order History:</strong></h2>
+<% if @orders.empty? %>
+  <p>No orders yet.</p>
+<% else %>
+<table class="profile-table">
   <thead>
     <tr>
       <th>Item Name</th>
@@ -13,11 +54,12 @@
   <tbody>
     <% @orders.each do |order| %>
       <tr>
-        <td><%= order.item.name %></td>
+        <td class="wrapped-item"><%= order.item.name %></td>
         <td><%= order.quantity %></td>
         <td><%= order.item.price %></td>
         <td><%= order.quantity * order.item.price %></td>
       </tr>
     <% end %>
   </tbody>
-</table>
+</table>
+<% end %>