Add SelectCountryComponent and adjust app routing

Created a new SelectCountryComponent to allow users to select their country. The new component includes buttons for each country and is displayed by default at the application start. The application routing was updated accordingly to redirect to the new component when no specific URL is entered or a redirection is required.

client/src/app/app-routing.module.ts

@@ -72,7 +72,7 @@ const loginGuard: CanActivateFn = (
       // redirect to redirectUrl query param
       console.log(route.queryParams['redirectUrl']);
       return router.createUrlTree([
-        router.parseUrl(route.queryParams['redirectUrl'] ?? '/recipes'),
+        router.parseUrl(route.queryParams['redirectUrl'] ?? 'select-country'),
       ]);
       // return false;
     })
@@ -94,15 +94,15 @@ const routes: Routes = [
       ),
   },
   {
-    path: '',
+    path: 'select-country',
+    loadComponent: () => import('./core/department/select-country.component').then(m => m.SelectCountryComponent),
+    canActivate: [authGuard]
+  },
+  {
+    path: ':department',
     loadComponent: () =>
       import('./core/layout/layout.component').then((m) => m.LayoutComponent),
     children: [
-      {
-        path: '',
-        pathMatch: 'full',
-        redirectTo: 'recipes',
-      },
       {
         path: 'recipes',
         loadComponent: () =>
@@ -126,20 +126,25 @@ const routes: Routes = [
       //       (m) => m.ChangelogComponent
       //     ),
       // },
-      {
-        path: 'unauthorized',
-        loadComponent: () => import('./core/auth/unauthorized.component').then((m) => m.UnauthorizedComponent)
-      },
-      {
-        path: 'notfound',
-        loadComponent: () => import('./core/notfound.component').then((m) => m.NotfoundComponent)
-      },
-      {
-        path: '**',
-        redirectTo: 'notfound',
-      },
     ],
   },
+  {
+    path: 'unauthorized',
+    loadComponent: () => import('./core/auth/unauthorized.component').then((m) => m.UnauthorizedComponent)
+  },
+  {
+    path: 'notfound',
+    loadComponent: () => import('./core/notfound.component').then((m) => m.NotfoundComponent)
+  },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'select-country'
+  },
+  {
+    path: '**',
+    redirectTo: 'notfound',
+  },
 ];
 
 @NgModule({

client/src/app/core/department/select-country.component.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, NgOptimizedImage],
+  template: `
+      <div class="flex flex-row sm:flex-col gap-5 items-center justify-center h-screen bg-[#EAE6E1]">
+      <h1 class="font-bold text-amber-950 text-3xl hidden sm:block">Select Product</h1>
+          <div class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5">
+              <button *ngFor="let country of countries"
+                      class="transition-transform duration-300 ease-in-out transform shadow-lg hover:scale-110 hover:shadow-xl">
+                  <img ngSrc="{{country.img}}" alt="{{country.country}}" width="200" height="225" priority="true"/>
+              </button>
+          </div>
+          <div class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5">
+              <button *ngFor="let alpha of alphas"
+                      class="transition-transform duration-300 ease-in-out transform hover:scale-110 hover:shadow-xl">
+                  <img ngSrc="{{alpha.img}}" alt="{{alpha.alphaName}}" width="200" height="225" priority="true"/>
+              </button>
+          </div>
+      </div>
+  `
+})
+export class SelectCountryComponent {
+  countries: {country: string; img: string}[] = [{
+    country: 'Thai',
+    img: 'assets/departments/tha_plate.png'
+  }, {
+    country: 'Malaysia',
+    img: 'assets/departments/mys_plate.png'
+  }, {
+    country: 'Australia',
+    img: 'assets/departments/aus_plate.png'
+  }]
+
+  alphas: {alphaName: string; img: string}[] = [
+    {
+      alphaName: 'ALPHA-3',
+      img: 'assets/departments/alpha-3.png'
+    }
+  ]
+
+}