Update UI

README.md

@@ -20,15 +20,15 @@
 
 Job Tracker is a simple, powerful, and user-friendly web application designed to help job seekers efficiently manage their job search process. Built with Ruby on Rails and enhanced with modern web technologies, this tool streamlines the often overwhelming task of tracking multiple job applications.
 
-<img alt="UI Screenshot" src="https://github.com/user-attachments/assets/8153c979-2bc9-437b-965d-c838506d5036"/>
+<img alt="UI Screenshot" src="https://github.com/user-attachments/assets/09f11ccf-e266-457f-bac6-f2b4183f1377"/>
 
 ## Key Features
 
 - **Intuitive Interface**: Easy-to-use dashboard for quick overview of all job applications.
 - **Detailed Tracking**: Record essential information for each application, including:
-  - Applied
-  - Company
-  - Position
+  - Applied On Date
+  - Company Name
+  - Position Title
   - Postion Type (Full-time, Part-time, Internship)
   - Contact Method
   - Point of Contact (P.o.C.)
@@ -63,7 +63,13 @@ Refer [here](./docs/installing_prerequisites.md) to install these dependencies
 
 ### Running the application
 
-Start your application
+Run `bin/setup` to set up the application. It prepares the database and installs the required ruby gems and javascript packages. The script is idempotent, so you can run it multiple times.
+
+```bash
+./bin/setup
+```
+
+Start Job Tracker
 
 ```bash
 ./bin/dev

app/helpers/job_applications_helper.rb

@@ -8,4 +8,70 @@ def display_position_type(position_type)
       position_type
     end
   end
+
+  def status_chip_classes(status)
+    base_classes = "rounded-full px-2 py-1 text-xs font-medium text-center whitespace-nowrap overflow-hidden text-ellipsis max-w-full"
+
+    status_classes = case status.to_sym
+    when :hired
+      "bg-green-100 text-green-800"
+    when :interviewing
+      "bg-blue-100 text-blue-800"
+    when :job_offer
+      "bg-purple-100 text-purple-800"
+    when :no_response
+      "bg-yellow-100 text-yellow-800"
+    when :not_hired
+      "bg-red-100 text-red-800"
+    else
+      "bg-gray-100 text-gray-800"
+    end
+
+    "#{base_classes} #{status_classes}"
+  end
+
+  def position_type_chip_classes(position_type)
+    base_classes = "rounded-full px-2 py-1 text-xs font-medium text-center whitespace-nowrap overflow-hidden text-ellipsis max-w-full"
+
+    type_classes = case position_type.to_sym
+    when :full_time
+      "bg-indigo-100 text-indigo-800"
+    when :part_time
+      "bg-amber-100 text-amber-800"
+    when :internship
+      "bg-teal-100 text-teal-800"
+    else
+      "bg-gray-100 text-gray-800"
+    end
+
+    "#{base_classes} #{type_classes}"
+  end
+
+  def location_emoji_with_tooltip(location)
+    emoji_map = {
+      in_office: "🏢",
+      remote: "💻",
+      hybrid: "🔄"
+    }
+
+    emoji = emoji_map[location.to_sym] || "❓"
+    full_text = location.to_s.humanize
+
+    content_tag(:span, emoji, title: full_text, class: "cursor-default text-2xl")
+  end
+
+  def method_of_contact_emoji_with_tooltip(method)
+    emoji_map = {
+      email: "📧",
+      internet_job_application: "🌐",
+      other: "🗂️",
+      phone: "📱",
+      recruiter: "🤝"
+    }
+
+    emoji = emoji_map[method.to_sym] || "❓"
+    full_text = method.to_s.humanize
+
+    content_tag(:span, emoji, title: full_text, class: "cursor-default text-2xl")
+  end
 end

app/views/job_applications/_job_application.html.erb

@@ -1,35 +1,39 @@
-<tr class="h-20" id="<%= dom_id(job_application) %>">
-  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+<tr class="h-20 border-b border-gray-200 bg-white text-sm" id="<%= dom_id(job_application) %>">
+  <td class="px-5 py-5">
     <%= job_application.date_applied.strftime('%m/%d/%Y') %>
   </td>
-  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+  <td class="px-5 py-5">
     <%= job_application.company_name %>
   </td>
-  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+  <td class="px-5 py-5">
     <%= job_application.position_title %>
   </td>
-  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-    <%= display_position_type(job_application.position_type) %>
+  <td class="px-2 py-3 w-24">
+    <div class="<%= position_type_chip_classes(job_application.position_type) %>">
+      <%= display_position_type(job_application.position_type) %>
+    </div>
   </td>
-  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-    <%= job_application.method_of_contact.humanize %>
+  <td class="px-5 py-5 text-center">
+    <%= method_of_contact_emoji_with_tooltip(job_application.method_of_contact) %>
   </td>
-  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+  <td class="px-5 py-5">
     <%= job_application.point_of_contact.present? ? job_application.point_of_contact : '-' %>
   </td>
-  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+  <td class="px-5 py-5">
     <%= job_application.email_address.present? ? job_application.email_address : '-' %>
   </td>
-  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+  <td class="px-5 py-5 ">
     <%= job_application.claimed_for_unemployment ? '✔︎' : '-' %>
   </td>
-  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-    <%= job_application.status.humanize %>
+  <td class="px-2 py-3 w-24">
+    <div class="<%= status_chip_classes(job_application.status) %>">
+      <%= job_application.status.humanize %>
+    </div>
   </td>
-  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-    <%= job_application.location.humanize %>
+  <td class="px-5 py-5 text-center">
+    <%= location_emoji_with_tooltip(job_application.location) %>
   </td>
-  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+  <td class="px-5 py-5">
     <% if job_application.website_link.present? %>
       <%= link_to 'Visit',
           safe_url(job_application.website_link),

app/views/job_applications/_job_applications_table.html.erb

@@ -4,8 +4,8 @@
       <table class="w-full">
         <thead class="text-xs bg-gray-100 text-left font-semibold text-gray-600 w-8 border-b-2">
           <tr>
-            <th class="px-5 py-3 w-8">
-              <%= sort_link_to 'Applied', 'date_applied' %>
+            <th class="px-5 py-3 w-36">
+              <%= sort_link_to 'Applied On', 'date_applied' %>
             </th>
             <th class="px-5 py-3 w-48">
               <%= sort_link_to 'Company', 'company_name' %>
@@ -28,7 +28,7 @@
             <th class="px-5 py-3">
               <%= sort_link_to 'Claimed', 'claimed_for_unemployment' %>
             </th>
-            <th class="px-5 py-3">
+            <th class="px-2 py-3 w-32">
               <%= sort_link_to 'Status', 'status' %>
             </th>
             <th class="px-5 py-3">