Merge branch 'WorkflowChange' of github.com:Tria-plc/emaui into WorkflowChange

libs/api/src/lib/base-api/base-query-with-reauth.ts

@@ -1,10 +1,11 @@
-import { fetchBaseQuery, type BaseQueryFn } from '@reduxjs/toolkit/query/react';
-import type { FetchArgs, FetchBaseQueryError } from '@reduxjs/toolkit/query';
-import { resolveSessionContext } from '../session';
+import { fetchBaseQuery, type BaseQueryFn } from "@reduxjs/toolkit/query/react";
+import type { FetchArgs, FetchBaseQueryError } from "@reduxjs/toolkit/query";
+import { resolveSessionContext } from "../session";
 
 export const BASE_API_URL =
-  (import.meta as { env?: Record<string, string> }).env?.['VITE_BASE_API_URL'] ??
-  'http://localhost:3000/api';
+  (import.meta as { env?: Record<string, string> }).env?.[
+    "VITE_BASE_API_URL"
+  ] ?? "http://localhost:3001/api";
 
 let _onTokenExpired: (() => Promise<string>) | null = null;
 let _onAuthFailure: (() => void) | null = null;
@@ -28,7 +29,7 @@ export const baseQueryWithReauth: BaseQueryFn<
       const { token, sessionHeaders } = resolveSessionContext(
         api.getState() as { auth?: { token?: string } },
       );
-      if (token) headers.set('Authorization', `Bearer ${token}`);
+      if (token) headers.set("Authorization", `Bearer ${token}`);
       Object.entries(sessionHeaders).forEach(([k, v]) => headers.set(k, v));
       return headers;
     },

libs/auth/src/lib/utils/refresh-token.ts

@@ -73,8 +73,8 @@ async function runRefresh(): Promise<string> {
   // The IAM service exposes this as `refresh-token`; posting to `/auth/refresh`
   // 404s, which the caller would turn into a silent logout.
   const response = await fetch(`${BASE_API_URL}/auth/refresh-token`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ refreshToken }),
   });
 

libs/ui/src/lib/input/BilingualInput.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import {
+  Tooltip,
   TextInput,
   UnstyledButton,
   rem,
@@ -37,6 +38,9 @@ export function BilingualInput({
   ...rest
 }: BilingualInputProps) {
   const [lang, setLang] = useState<'en' | 'am'>('en');
+  const otherLang = lang === 'en' ? 'am' : 'en';
+  const otherLangName = otherLang === 'en' ? 'English' : 'Amharic';
+  const otherIsEmpty = !value[otherLang]?.trim();
 
   const toggle = () => setLang((l) => (l === 'en' ? 'am' : 'en'));
 
@@ -48,37 +52,59 @@ export function BilingualInput({
       value={value[lang]}
       onChange={(e) => onChange({ ...value, [lang]: e.currentTarget.value })}
       rightSection={
-        <UnstyledButton
-          onClick={toggle}
-          aria-label={`Switch to ${lang === 'en' ? 'Amharic' : 'English'}`}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: rem(28),
-            height: rem(20),
-            borderRadius: rem(4),
-            fontSize: rem(10),
-            fontWeight: 700,
-            letterSpacing: '0.05em',
-            background:
-              lang === 'en'
-                ? 'var(--mantine-color-blue-1)'
-                : 'var(--mantine-color-teal-1)',
-            color:
-              lang === 'en'
-                ? 'var(--mantine-color-blue-7)'
-                : 'var(--mantine-color-teal-7)',
-            cursor: 'pointer',
-            transition: 'background 150ms ease',
-          }}
+        <Tooltip
+          label={`Switch to ${otherLangName}${otherIsEmpty ? ' — empty' : ''}`}
+          withArrow
         >
-          {lang === 'en' ? 'EN' : 'AM'}
-        </UnstyledButton>
+          <UnstyledButton
+            onClick={toggle}
+            aria-label={`Switch to ${otherLangName}`}
+            style={{
+              position: 'relative',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: rem(32),
+              height: rem(24),
+              borderRadius: rem(4),
+              fontSize: rem(11),
+              fontWeight: 700,
+              letterSpacing: '0.05em',
+              background:
+                lang === 'en'
+                  ? 'var(--mantine-color-blue-1)'
+                  : 'var(--mantine-color-teal-1)',
+              color:
+                lang === 'en'
+                  ? 'var(--mantine-color-blue-7)'
+                  : 'var(--mantine-color-teal-7)',
+              cursor: 'pointer',
+              transition: 'background 150ms ease',
+            }}
+          >
+            {lang === 'en' ? 'EN' : 'AM'}
+            {otherIsEmpty && (
+              <span
+                aria-hidden
+                title={`${otherLangName} text is missing`}
+                style={{
+                  position: 'absolute',
+                  top: -2,
+                  right: -2,
+                  width: rem(7),
+                  height: rem(7),
+                  borderRadius: '50%',
+                  background: 'var(--mantine-color-red-6)',
+                  border: '1px solid var(--mantine-color-body)',
+                }}
+              />
+            )}
+          </UnstyledButton>
+        </Tooltip>
       }
       styles={{
         input: {
-          paddingRight: rem(42),
+          paddingRight: rem(46),
         },
       }}
       {...rest}