fix: fix ci issues and update styles to remove ui elements

vigilcare-records-web/src/assets/main.css

@@ -1,7 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  body {
+    @apply font-sans;
+  }
+}
+
 @layer components {
   .btn-primary {
     @apply bg-primary-600 text-white px-4 py-2 rounded-md
@@ -37,6 +45,9 @@
     @apply flex flex-wrap items-center gap-2 sm:gap-4;
   }
   .card {
+    @apply bg-white rounded-md border border-gray-200 p-4 sm:p-6;
+  }
+  .card-elevated {
     @apply bg-white rounded-lg shadow-md p-4 sm:p-6;
   }
   .split-pane {

vigilcare-records-web/src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

vigilcare-records-web/src/components/AppHeader.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="app-header">
     <div class="app-header-title">
+      <router-link to="/" class="flex items-center gap-2 shrink-0">
+        <svg viewBox="0 0 32 32" class="w-6 h-6" aria-hidden="true">
+          <path fill="currentColor" class="text-primary-700" d="M16 2 4 6.5v8.2c0 8 5.1 14.6 12 15.3 6.9-.7 12-7.3 12-15.3V6.5z"/>
+          <path fill="white" d="M16 8.5c-3.6 0-6.6 2.8-6.6 6.3 0 3.4 2.7 6.4 6.6 9.6 3.9-3.2 6.6-6.2 6.6-9.6 0-3.5-3-6.3-6.6-6.3m0 3.4c1.7 0 3.1 1.3 3.1 2.9s-1.4 2.9-3.1 2.9-3.1-1.3-3.1-2.9 1.4-2.9 3.1-2.9"/>
+        </svg>
+        <span class="font-bold text-primary-800 tracking-tight">VigilCare</span>
+      </router-link>
       <h1 class="text-lg font-semibold">{{ title }}</h1>
       <nav class="flex gap-3 ml-4">
         <router-link v-if="auth.canIntake" to="/intake" class="nav-link">Intake</router-link>
@@ -9,8 +16,8 @@
         <router-link v-if="auth.canVerify" to="/verification" class="nav-link">Verification</router-link>
         <router-link v-if="auth.canApprove" to="/approval" class="nav-link">Approval</router-link>
         <router-link v-if="auth.canLiveCapture" to="/live-capture" class="nav-link">Live Capture</router-link>
-        <router-link to="/patients" class="nav-link">History</router-link>
-        <router-link v-if="auth.canSupervise" to="/dashboard" class="nav-link">Dashboard</router-link>
+        <router-link to="/patients" class="nav-link">Patient History</router-link>
+        <router-link v-if="auth.canSupervise" to="/dashboard" class="nav-link">Queue Dashboard</router-link>
         <router-link v-if="auth.canSupervise" to="/fhir-explorer" class="nav-link">FHIR Explorer</router-link>
       </nav>
       <slot name="subtitle" />

vigilcare-records-web/src/views/PatientHistoryView.vue

@@ -29,19 +29,19 @@
         <div v-else-if="history">
           <!-- Summary stats -->
           <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
-            <div class="card text-center">
+            <div class="card-elevated text-center">
               <p class="text-2xl font-bold">{{ history.totalBatches }}</p>
               <p class="text-xs text-gray-500">Total Batches</p>
             </div>
-            <div class="card text-center">
+            <div class="card-elevated text-center">
               <p class="text-2xl font-bold text-green-700">{{ history.promotedBatches }}</p>
               <p class="text-xs text-gray-500">Promoted</p>
             </div>
-            <div class="card text-center">
+            <div class="card-elevated text-center">
               <p class="text-2xl font-bold text-orange-600">{{ history.pendingBatches }}</p>
               <p class="text-xs text-gray-500">Pending</p>
             </div>
-            <div class="card text-center">
+            <div class="card-elevated text-center">
               <p class="text-2xl font-bold text-gray-400">{{ history.supersededBatches }}</p>
               <p class="text-xs text-gray-500">Superseded</p>
             </div>

vigilcare-records-web/src/views/QueueDashboardView.vue

@@ -15,25 +15,25 @@
     <div class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8 space-y-6 lg:space-y-8">
       <!-- Summary cards -->
       <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 lg:gap-8">
-        <div class="card">
+        <div class="card-elevated">
           <p class="text-sm text-gray-500">Pending Entry</p>
           <p class="text-3xl font-bold text-yellow-600">
             {{ overview?.statusCounts?.UPLOADED ?? 0 }}
           </p>
         </div>
-        <div class="card">
+        <div class="card-elevated">
           <p class="text-sm text-gray-500">In Entry</p>
           <p class="text-3xl font-bold text-blue-600">
             {{ overview?.statusCounts?.IN_ENTRY ?? 0 }}
           </p>
         </div>
-        <div class="card">
+        <div class="card-elevated">
           <p class="text-sm text-gray-500">Pending Verification</p>
           <p class="text-3xl font-bold text-orange-600">
             {{ overview?.statusCounts?.PENDING_VERIFICATION ?? 0 }}
           </p>
         </div>
-        <div class="card">
+        <div class="card-elevated">
           <p class="text-sm text-gray-500">Reject Rate</p>
           <p
             class="text-3xl font-bold"
@@ -48,7 +48,7 @@
 
       <!-- Queue age and throughput -->
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8">
-        <div class="card">
+        <div class="card-elevated">
           <h3 class="text-sm font-medium text-gray-700 mb-2">Average Time in Queue</h3>
           <p class="text-2xl font-bold">
             {{ formatMinutes(overview?.averageTimeInQueueMinutes ?? 0) }}
@@ -57,7 +57,7 @@
             Target: &lt; 24 hours
           </p>
         </div>
-        <div class="card">
+        <div class="card-elevated">
           <h3 class="text-sm font-medium text-gray-700 mb-2">
             Oldest Pending Verification
           </h3>

vigilcare-records-web/tailwind.config.js

@@ -8,23 +8,31 @@ export default {
     extend: {
       colors: {
         primary: {
-          50:  '#eff6ff',
-          100: '#dbeafe',
-          300: '#93c5fd',
-          400: '#60a5fa',
-          500: '#3b82f6',
-          600: '#2563eb',
-          700: '#1d4ed8',
-          800: '#1e40af',
+          50:  '#eff9f8',
+          100: '#d9f0ee',
+          300: '#92d2ca',
+          400: '#5cb9ae',
+          500: '#2f9d91',
+          600: '#1f8075',
+          700: '#17655d',
+          800: '#124e48',
         },
         clinical: {
-          safe:    '#16a34a',
-          warning: '#eab308',
-          danger:  '#dc2626',
+          safe:    '#2f9e58',
+          warning: '#c98a1b',
+          danger:  '#c2293f',
         },
       },
+      fontFamily: {
+        sans: [
+          '"Public Sans"',
+          'ui-sans-serif',
+          'system-ui',
+          '-apple-system',
+          'sans-serif',
+        ],
+      },
       spacing: {
-        // Rule of 8 — prefer these multiples of 8px in component spacing
         18: '4.5rem',
         22: '5.5rem',
       },