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

.gitea/workflows/ci.yml

@@ -14,6 +14,18 @@ on:
 jobs:
   backend:
     runs-on: ubuntu-latest
+    # act_runner's docker executor runs steps inside their own job container — a
+    # sibling of the "docker compose" containers below — so "localhost" from inside
+    # the job container is NOT the Docker host and can't reach the published
+    # Postgres/Redis ports (this is what "Connection refused" on 127.0.0.1:5437
+    # in the Test step means). The Test step below points at host.docker.internal
+    # instead; that hostname must resolve inside the job container, which on Linux
+    # requires the runner itself (not this workflow) to add
+    # `--add-host=host.docker.internal:host-gateway` — set
+    # `container: { options: "--add-host=host.docker.internal:host-gateway" }` in the
+    # act_runner's config.yaml. Docker Desktop runners already resolve this hostname
+    # out of the box. See docs/25-gitea-cicd-docker-deploy.md ("Runner requirement
+    # for Compose-based tests").
     steps:
       - uses: actions/checkout@v4
 
@@ -62,6 +74,8 @@ jobs:
       - name: Test
         env:
           ASPNETCORE_ENVIRONMENT: "Testing"
+          CONNECTIONSTRINGS__DEFAULTCONNECTION: "Host=host.docker.internal;Port=5437;Database=vigilcare_records_test;Username=postgres;Password=password"
+          REDIS__CONNECTIONSTRING: "host.docker.internal:6383,defaultDatabase=1,allowAdmin=true"
         run: |
           dotnet test VigilCareRecords.sln -c Release --no-build \
             --logger "trx;LogFileName=test-results.trx" \

VigilCareRecordsAPI.Tests/Fixtures/ApiFixture.cs

@@ -9,17 +9,30 @@ public class ApiFixture : WebApplicationFactory<Program>, IAsyncLifetime
 {
     // Override configuration to point at a test database — never run tests against
     // the development database; a botched rollback could corrupt seed data.
+    //
+    // Defaults assume Postgres/Redis are reachable on the host's loopback address
+    // (e.g. `docker compose up -d postgres redis` on a dev machine). CI runners that
+    // execute the test step inside its own job container (act_runner's default docker
+    // executor) can't reach ports published on the Docker *host* via "localhost" —
+    // set CONNECTIONSTRINGS__DEFAULTCONNECTION / REDIS__CONNECTIONSTRING (e.g. to
+    // host.docker.internal) in that environment to override.
     protected override void ConfigureWebHost(IWebHostBuilder builder)
     {
         builder.UseEnvironment("Testing");
         builder.ConfigureAppConfiguration((_, config) =>
         {
+            var connectionString = Environment.GetEnvironmentVariable("CONNECTIONSTRINGS__DEFAULTCONNECTION")
+                ?? "Host=localhost;Port=5437;Database=vigilcare_records_test;Username=postgres;Password=password";
+            var redisConnectionString = Environment.GetEnvironmentVariable("REDIS__CONNECTIONSTRING")
+                ?? "localhost:6383,defaultDatabase=1,allowAdmin=true";
+            var fhirBaseUrl = Environment.GetEnvironmentVariable("FHIR__BASEURL")
+                ?? "http://localhost/fhir";
+
             config.AddInMemoryCollection(new Dictionary<string, string?>
             {
-                ["ConnectionStrings:DefaultConnection"] =
+                ["ConnectionStrings:DefaultConnection"] = connectionString,
-                    "Host=localhost;Port=5437;Database=vigilcare_records_test;Username=postgres;Password=password",
+                ["Redis:ConnectionString"] = redisConnectionString,
-                ["Redis:ConnectionString"] = "localhost:6383,defaultDatabase=1,allowAdmin=true",
+                ["Fhir:BaseUrl"] = fhirBaseUrl
-                ["Fhir:BaseUrl"] = "http://localhost/fhir"
             });
         });
     }

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 to="/patients" class="nav-link">Patient History</router-link>
-        <router-link v-if="auth.canSupervise" to="/dashboard" class="nav-link">Dashboard</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',
+          50:  '#eff9f8',
-          100: '#dbeafe',
+          100: '#d9f0ee',
-          300: '#93c5fd',
+          300: '#92d2ca',
-          400: '#60a5fa',
+          400: '#5cb9ae',
-          500: '#3b82f6',
+          500: '#2f9d91',
-          600: '#2563eb',
+          600: '#1f8075',
-          700: '#1d4ed8',
+          700: '#17655d',
-          800: '#1e40af',
+          800: '#124e48',
         },
         clinical: {
-          safe:    '#16a34a',
+          safe:    '#2f9e58',
-          warning: '#eab308',
+          warning: '#c98a1b',
-          danger:  '#dc2626',
+          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',
       },