Various Updates

.github/workflows/ci.yml

@@ -33,15 +33,15 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16.14.0'
+          node-version: '18.18.2'
       - name: Setup yarn
         run: npm install -g yarn
       - name: Install Node packages
         run: yarn install
       - name: Install Ruby and gems
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.1.3
+          ruby-version: 3.1.4
           bundler-cache: true
       - name: Precompile assets
         run: bundle exec rails assets:precompile
@@ -60,7 +60,7 @@ jobs:
       - name: Install Ruby and gems
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.1.3
+          ruby-version: 3.1.4
           bundler-cache: true
       # Add or replace any other lints here
       - name: Security audit dependencies

.gitignore

@@ -41,3 +41,6 @@ bin/terrafile
 bin/konduit.sh
 bin/fetch_config.rb
 .byebug_history
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

.ruby-version

@@ -1 +1 @@
-3.1.3
+3.1.4

.tool-versions

@@ -1,5 +1,5 @@
-nodejs 16.14.0
-ruby 3.1.3
+nodejs 18.18.2
+ruby 3.1.4
 yarn 1.22.18
 bundler 2.1.4
 tilt 0.33.5

Dockerfile

@@ -1,4 +1,4 @@
-FROM ruby:3.1.3-alpine3.15
+FROM ruby:3.1.4-alpine
 
 ENV APP_HOME /app
 RUN mkdir $APP_HOME
@@ -17,9 +17,6 @@ RUN apk add --update --no-cache --virtual build-dependances \
     rm -rf /usr/local/bundle/cache && \
     apk del build-dependances
 
-# Remove once base image ruby:3.1.3-alpine3.15 has been updated with latest libraries
-RUN apk add --no-cache ncurses-libs=6.3_p20211120-r2
-
 COPY package.json yarn.lock ./
 RUN  yarn install --frozen-lockfile && \
      yarn cache clean

Gemfile

@@ -3,7 +3,7 @@
 source "https://rubygems.org"
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby "3.1.3"
+ruby "3.1.4"
 
 gem "bootsnap", require: false
 gem "foreman"
@@ -14,7 +14,6 @@ gem "puma", "~> 6.4"
 gem "rails", "~> 7.0.8"
 gem "sprockets-rails"
 gem "tzinfo-data", platforms: %i[mingw mswin x64_mingw jruby]
-gem "webpacker"
 
 gem "pagy"
 gem "scenic"
@@ -83,3 +82,7 @@ gem "sidekiq", "~> 6.5"
 gem "sidekiq-cron", "~> 1.10"
 
 gem "mail-notify", "~> 1.1"
+
+gem "dartsass-rails", "~> 0.5.0"
+
+gem "importmap-rails", "~> 1.2"

Gemfile.lock

@@ -105,6 +105,9 @@ GEM
       dry-validation (~> 1.0, >= 1.0.0)
     connection_pool (2.4.1)
     crass (1.0.6)
+    dartsass-rails (0.5.0)
+      railties (>= 6.0.0)
+      sass-embedded (~> 1.63)
     date (3.3.3)
     debug (1.8.0)
       irb (>= 1.5.0)
@@ -188,6 +191,7 @@ GEM
       raabro (~> 1.4)
     globalid (1.2.1)
       activesupport (>= 6.1)
+    google-protobuf (3.24.4)
     govuk-components (4.1.1)
       html-attributes-utils (~> 1.0.0, >= 1.0.0)
       pagy (~> 6.0)
@@ -205,6 +209,9 @@ GEM
       multi_xml (>= 0.5.2)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
+    importmap-rails (1.2.1)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     invisible_captcha (2.1.0)
       rails (>= 5.2)
     io-console (0.6.0)
@@ -295,8 +302,6 @@ GEM
     rack (2.2.8)
     rack-protection (3.1.0)
       rack (~> 2.2, >= 2.2.4)
-    rack-proxy (0.7.6)
-      rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rails (7.0.8)
@@ -398,10 +403,12 @@ GEM
     sanitize (6.1.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
+    sass-embedded (1.69.3)
+      google-protobuf (~> 3.23)
+      rake (>= 13.0.0)
     scenic (1.7.0)
       activerecord (>= 4.0.0)
       railties (>= 4.0.0)
-    semantic_range (3.0.0)
     sentry-rails (5.12.0)
       railties (>= 5.0)
       sentry-ruby (~> 5.12.0)
@@ -451,11 +458,6 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -475,6 +477,7 @@ DEPENDENCIES
   bundler-audit
   capybara
   config (~> 4.2)
+  dartsass-rails (~> 0.5.0)
   debug
   devise (~> 4.9)
   dotenv-rails
@@ -487,6 +490,7 @@ DEPENDENCIES
   govuk-components (= 4.1.1)
   govuk_design_system_formbuilder
   httparty (~> 0.21)
+  importmap-rails (~> 1.2)
   invisible_captcha
   jbuilder
   launchy
@@ -516,10 +520,9 @@ DEPENDENCIES
   tzinfo-data
   uk_postcode
   web-console
-  webpacker
 
 RUBY VERSION
-   ruby 3.1.3p185
+   ruby 3.1.4p223
 
 BUNDLED WITH
    2.1.4

Procfile.dev

@@ -1,2 +1,2 @@
 web: bin/rails server -p $PORT
-webpack: bin/webpack-dev-server
+sass: bin/rails dartsass:watch

app/assets/config/manifest.js

@@ -1,2 +1,5 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
+//= link_tree ../builds
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js
+//= link_tree ../../../node_modules

app/assets/stylesheets/application.scss

@@ -0,0 +1,3 @@
+// Sassy
+@import 'govuk-frontend/govuk/all';
+@import 'custom';

app/assets/stylesheets/custom.scss

@@ -0,0 +1,138 @@
+.dashboard {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 20px; /* Adjust this for your desired gap between columns */
+}
+
+.kpi-widget {
+  background-color: #1d70b8;
+  border-radius: 5px;
+  padding: 15px;
+  text-align: center;
+
+  .title {
+    font-size: 28px;
+    font-weight: bold;
+    color: #fff;
+    margin: 0;
+    padding: 0;
+  }
+
+  .subtitle {
+    font-size: 17px;
+    font-weight: bold;
+    color: #fff;
+    margin: 0;
+    padding: 0;
+  }
+
+  .value {
+    font-size: 70px;
+    font-weight: bold;
+    color: #fff;
+    display: block;
+    padding: 0;
+    margin: 0;
+  }
+
+  .value-small {
+    font-size: 24px;
+    font-weight: bold;
+    color: #fff;
+    display: block;
+    padding: 0;
+    margin: 0;
+  }
+  .value-smallest {
+    font-size: 20px;
+    font-weight: bold;
+    color: #fff;
+    display: block;
+    padding: 0;
+    margin: 0;
+  }
+
+  .kpi-table {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: 100%;
+    text-align: left;
+    color: #fff;
+
+    th {
+      font-weight: bold;
+      padding: 5px;
+    }
+
+    td {
+      padding: 5px;
+      font-size: 20px;
+    }
+
+    a {
+      color: #fff;
+      text-decoration: none;
+    }
+  }
+}
+
+.applicants-table {
+  font-size: 15px;
+
+  .govuk-table__head {
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+    box-shadow: 0 0.3px 0 #b1b4b6;
+  }
+
+  th {
+    vertical-align: middle;
+    text-align: center;
+  }
+
+  td:not(:nth-child(-n + 2)) {
+    width: 120px;
+  }
+  td {
+    vertical-align: middle;
+  }
+  tr.sla-breached {
+    background-color: #f8d7da;
+  }
+}
+
+.flash {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  width: 100%;
+  font-size: 1.2em;
+
+  &.notice {
+    color: #155724;
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+  }
+
+  &.alert {
+    color: #721c24;
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+  }
+}
+
+#search {
+  .row {
+    display: flex;
+  }
+
+  .column {
+    flex: 1;
+  }
+
+  .full-width {
+    width: 100%;
+  }
+}

app/javascript/application.js

@@ -0,0 +1,4 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import { initAll } from "govuk-frontend"
+
+initAll();

app/views/layouts/admin.html.erb

@@ -13,16 +13,15 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="<%= asset_pack_url('media/images/favicon.ico') %>" type="image/x-icon" />
-    <link rel="mask-icon" href="<%= asset_pack_url('media/images/govuk-mask-icon.svg') %>" color="blue">
-    <link rel="apple-touch-icon" sizes="180x180" href="<%= asset_pack_url('media/images/govuk-apple-touch-icon-180x180.png') %>">
-    <link rel="apple-touch-icon" sizes="167x167" href="<%= asset_pack_url('media/images/govuk-apple-touch-icon-167x167.png') %>">
-    <link rel="apple-touch-icon" sizes="152x152" href="<%= asset_pack_url('media/images/govuk-apple-touch-icon-152x152.png') %>">
-    <link rel="apple-touch-icon" href="<%= asset_pack_url('media/images/govuk-apple-touch-icon.png') %>">
-
-    <%= stylesheet_pack_tag 'govuk', 'data-turbolinks-track': 'reload' %>
-
-    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="<%= asset_url('govuk-frontend/govuk/assets/images/favicon.ico') %>" type="image/x-icon" />
+    <link rel="mask-icon" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-mask-icon.svg') %>" color="blue">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-180x180.png') %>">
+    <link rel="apple-touch-icon" sizes="167x167" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-167x167.png') %>">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-152x152.png') %>">
+    <link rel="apple-touch-icon" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon.png') %>">
+    <%= stylesheet_link_tag 'application', 'data-turbolinks-track': 'reload' %>
+
+    <%= javascript_importmap_tags %>
   </head>
 
   <body class="govuk-template__body app-body-class">
@@ -56,8 +55,6 @@
       "Help" => "#", "Cookies" => "#", "Contact" => "#", "Terms and Conditions" => "#" 
       }) 
     %>
-
-    <%= javascript_pack_tag 'govuk', 'data-turbolinks-track': 'reload' %>
   </body>
 
 </html>