added place holder for empty data and added defauld dates

app/views/lab_tests/_date_filter.html.erb

@@ -1,25 +1,25 @@
-<div class="tw-mb-6 tw-flex tw-justify-between tw-items-center">
-    <%= form_with(url: lab_tests_path, method: :get, class: "tw-inline-flex tw-items-center") do |f| %>
-    <div class="tw-inline-flex tw-items-center">
-        <span class="tw-mr-3 tw-text-sm tw-font-medium"><%= t('.from') %></span>
+<div class="mb-6 flex justify-between items-center">
+    <%= form_with(url: lab_tests_path, method: :get, class: "inline-flex items-center") do |f| %>
+    <div class="inline-flex items-center">
+        <span class="mr-3 text-sm font-medium"><%= t('.from') %></span>
         <%= f.date_field :start_date, 
-          value: params[:start_date], 
+          value: params[:start_date] || Date.today.beginning_of_year,
           min: "1900-01-01",
           max: "2100-01-01",
           onchange: "this.nextElementSibling.nextElementSibling.min=this.value",
-          class: "tw-rounded-md tw-border tw-border-gray-300 tw-py-2 tw-px-3 tw-mr-6",
+          class: "rounded-md border border-gray-300 py-2 px-3 mr-6",
           placeholder: "mm/dd/yyyy" %>
 
-        <span class="tw-mr-3 tw-text-sm tw-font-medium"><%= t('.to') %></span>
+        <span class="mr-3 text-sm font-medium"><%= t('.to') %></span>
         <%= f.date_field :end_date, 
-          value: params[:end_date], 
+          value: params[:end_date] || Date.today,
           min: params[:start_date] || "1900-01-01",
           max: "2100-01-01",
-          class: "tw-rounded-md tw-border tw-border-gray-300 tw-py-2 tw-px-3 tw-mr-6",
+          class: "rounded-md border border-gray-300 py-2 px-3 mr-6",
           placeholder: "mm/dd/yyyy" %>
 
         <%= f.submit t('.filter'), 
-          class: "tw-btn tw-btn-blue tw-bg-blue-500 tw-text-white tw-px-4 tw-py-2 tw-rounded-md hover:tw-bg-blue-600" %>
+          class: "primary-button" %>
     </div>
     <% end %>
 </div>

app/views/lab_tests/_no_data_placeholder.html.erb

@@ -0,0 +1,42 @@
+<div class="flex flex-col">
+    <div class="flex flex-col items-center justify-center p-4">
+        <svg fill="#000" height="50px" width="50px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.001 512.001" xml:space="preserve">
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+            <g id="SVGRepo_iconCarrier">
+                <g>
+                    <g>
+                        <path d="M363.801,0.001H54.872C24.615,0.001,0,24.616,0,54.874v402.254c0,30.256,24.615,54.872,54.872,54.872h55.403 c5.073,0,9.186-4.113,9.186-9.186c0-5.073-4.113-9.186-9.186-9.186H54.872c-20.126,0-36.5-16.373-36.5-36.5V54.874 c0-20.126,16.373-36.501,36.5-36.501h308.929c5.074,0,9.186-4.113,9.186-9.186C372.987,4.114,368.876,0.001,363.801,0.001z"></path>
+                    </g>
+                </g>
+                <g>
+                    <g>
+                        <path d="M457.128,0.002h-56.581c-5.074,0-9.186,4.113-9.186,9.186c0,5.073,4.111,9.185,9.185,9.185h56.581 c20.128,0,36.501,16.375,36.501,36.5v402.254c0,20.126-16.373,36.5-36.501,36.5H147.021c-5.073,0-9.186,4.113-9.186,9.186 c0,5.073,4.113,9.186,9.186,9.186h310.107c30.257,0,54.873-24.615,54.873-54.872V54.874 C512.001,24.617,487.385,0.002,457.128,0.002z"></path>
+                    </g>
+                </g>
+                <g>
+                    <g>
+                        <path d="M320.286,256l53.998-53.998c3.587-3.588,3.587-9.404,0-12.99l-51.296-51.294c-3.586-3.588-9.403-3.588-12.99,0 l-53.998,53.996l-53.998-53.996c-3.588-3.588-9.404-3.588-12.99,0l-51.294,51.294c-3.588,3.588-3.588,9.404,0,12.99L191.714,256 l-53.998,53.998c-3.588,3.588-3.588,9.403,0,12.99l51.294,51.294c1.722,1.723,4.059,2.691,6.495,2.691 c2.436,0,4.773-0.968,6.495-2.691l53.998-53.998l53.998,53.998c1.722,1.723,4.059,2.691,6.495,2.691 c2.436,0,4.773-0.968,6.495-2.691l51.296-51.294c3.587-3.587,3.587-9.404,0-12.99L320.286,256z M316.492,354.796l-53.998-53.998 c-1.793-1.794-4.145-2.691-6.495-2.691c-2.35,0-4.702,0.897-6.495,2.691l-53.998,53.998l-38.304-38.304l53.998-53.996 c1.723-1.723,2.691-4.059,2.691-6.495c0-2.436-0.968-4.772-2.691-6.495l-53.998-53.998l38.304-38.304l53.998,53.998 c3.588,3.588,9.404,3.588,12.99,0l53.998-53.998l38.304,38.304l-53.998,53.998c-1.723,1.723-2.691,4.059-2.691,6.495 c0,2.436,0.968,4.772,2.691,6.495l53.998,53.996L316.492,354.796z"></path>
+                    </g>
+                </g>
+            </g>
+        </svg>
+    </div>
+    <div class="flex flex-col items-center justify-center">
+        <h3 class="text-lg font-medium text-gray-900 mb-1 relative z-10">
+            <%= t('.no_data_title') %>
+        </h3>
+
+        <% if params[:start_date].present? && params[:end_date].present? %>
+        <p class="text-gray-500 relative z-10">
+            <%= t('.no_data_message_with_dates', 
+                start_date: Date.parse(params[:start_date]).strftime("%B %d, %Y"),
+                end_date: Date.parse(params[:end_date]).strftime("%B %d, %Y")) %>
+        </p>
+        <% else %>
+        <p class="text-gray-500 relative z-10">
+            <%= t('.no_data_message_no_dates') %>
+        </p>
+        <% end %>
+    </div>
+</div>

app/views/lab_tests/index.html.erb

@@ -11,5 +11,9 @@
     <div class="tw-container tw-mx-auto">
         <%= render 'date_filter' %>
     </div>
+    <% if @recordables.present? %>
     <%= render "index_table", recordables: @recordables, biomarkers: @biomarkers %>
+    <% else %>
+    <%= render 'no_data_placeholder' %>
+    <% end %>
 </section>

config/locales/en.yml

@@ -66,6 +66,10 @@ en:
       from: "From"
       to: "To"
       filter: "Filter"
+    no_data_placeholder:
+      no_data_title: "No Lab Tests Found"
+      no_data_message_with_dates: "No lab tests were found between %{start_date} and %{end_date}"
+      no_data_message_no_dates: "No lab tests have been recorded yet"
   admin:
     users:
       update: