✨feature: Add button for single domain page

public/stylesheets/style.css

@@ -2124,6 +2124,12 @@
     grid-template-columns: 1fr;
     grid-auto-rows: max-content;
   }
+  .card-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: calc(0.25rem * 2);
+  }
   .card-title {
     display: flex;
     align-items: center;
@@ -2277,6 +2283,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-0 {
     gap: calc(var(--spacing) * 0);
   }
@@ -2418,6 +2427,10 @@
     --btn-color: var(--color-info);
     --btn-fg: var(--color-info-content);
   }
+  .btn-primary {
+    --btn-color: var(--color-primary);
+    --btn-fg: var(--color-primary-content);
+  }
   .hover\:text-gray-400 {
     &:hover {
       @media (hover: hover) {
@@ -2425,6 +2438,20 @@
       }
     }
   }
+  .hover\:text-white {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+  }
+  .hover\:text-white\! {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white) !important;
+      }
+    }
+  }
   .sm\:grid-cols-2 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));

views/domain-cards.ejs

@@ -2,11 +2,11 @@
 // Helper function to format date
 function formatDate(dateString) {
   let date = new Date(dateString);
-  return date.toLocaleString('en-US', {
+  return date.toLocaleString('en-CA', {
     year: 'numeric',
     month: 'long',
     day: 'numeric',
-    hour: '2-digit',
+    hour: 'numeric',
     minute: '2-digit'
   });
 }
@@ -25,20 +25,24 @@ data.forEach(item => {
 
 <div class="card-container grid gap-6 grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
   <% Object.keys(groupedDomains).forEach(domain => { %>
-    <% // Sort entries by created_at descending and limit to 5
+    <%
-      let sortedEntries=groupedDomains[domain]
+    // Sort entries by created_at descending and limit to 5
-      .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
+    let sortedEntries=groupedDomains[domain]
-      .slice(0, 5);
+    .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
+    .slice(0, 5);
     %>
-    <div class="card w-fit bg-base-100 card-lg shadow-sm">
+    <div class="card w-full bg-base-100 card-lg shadow-sm">
       <div class="card-body">
         <h2 class="card-title"><%= domain %></h2>
         <% sortedEntries.forEach(entry => { %>
-          <div class="flex">
+          <div class="flex font-normal">
-            <p class="w-fit px-4 font-normal"><%= entry.id %></p>
+            <p class="w-fit"><%= entry.id %></p>
-            <p class="flex-grow-1 font-normal"><%= formatDate(entry.created_at) %></p>
+            <p class="flex-grow-1"><%= formatDate(entry.created_at) %></p>
           </div>
         <% }) %>
+        <div class="card-actions justify-end">
+          <a href="/sites/<%= domain %>" class="btn btn-info hover:text-white!">View All Tests</a>
+        </div>
       </div>
     </div>
   <% }) %>

views/index.ejs

@@ -3,7 +3,7 @@
 <article class="container mx-auto py-4 min-h-[70dvh]">
   <h2>Welcome to <%= title %></h2>
 
-  <div%- include('add-form'); -%>
+  <%- include('add-form'); -%>
 
   <h2 class="text-25px font-bold mt-8">Your Tests</h2>