update: apply ui/ux enhancements

src/app/components/Header.tsx

@@ -1,35 +1,61 @@
 'use client';
-import { Box, MenuItem } from '@mui/material';
+import { Home, Article, Dashboard } from '@mui/icons-material';
+import { Avatar, Box, Grid, MenuItem } from '@mui/material';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import NextLink from 'next/link';
+import { usePathname } from 'next/navigation';
 import * as React from 'react';
 
 import Login from './Login';
 import Logout from './Logout';
 import { useAuth } from '../context/AuthProvider';
 
+function stringAvatar(name: string) {
+  return {
+    sx: {
+      bgcolor: '#0003',
+    },
+    children: `${name.split(' ')[0][0].toLocaleUpperCase()}${name.split(' ')[1][0].toLocaleUpperCase()}`,
+  };
+}
+
 export default function Header() {
   const { isAuthenticated, user } = useAuth();
+  const pathname = usePathname();
   const AuthButton = isAuthenticated ? (
-    <div>
-      <div>
+    <Grid container alignItems="center" gap="6px" justifyContent="end">
+      <Grid item>{user?.name && <Avatar {...stringAvatar(user.name)} />}</Grid>
+      <Grid item pr="13px">
+        {user?.name}
+      </Grid>
+      <Grid item>
         <Logout />
-      </div>
-      <div>
-        Your full name is <b>{user?.name}</b>
-      </div>
-    </div>
+      </Grid>
+    </Grid>
   ) : (
-    <div>
-      <Login />
-    </div>
+    <Login />
   );
 
+  const ACTIVE_BUTTON_STYLE = {
+    background: '#fff2',
+    borderRadius: '12px',
+  } as const;
+
   return (
-    <AppBar position="static">
-      <Toolbar>
-        <MenuItem key="home" component={NextLink} href="/">
+    <AppBar sx={{ position: 'fixed', top: '0px' }}>
+      <Toolbar sx={{ gap: '6px' }}>
+        <MenuItem
+          key="home"
+          component={NextLink}
+          href="/"
+          sx={{
+            ...(pathname === '/' && ACTIVE_BUTTON_STYLE),
+          }}
+        >
+          <Home
+            sx={{ color: '#eee', paddingRight: '4px', marginRight: '3px' }}
+          />
           Home
         </MenuItem>
         {isAuthenticated && (
@@ -38,10 +64,26 @@ export default function Header() {
               key="patient-summary"
               component={NextLink}
               href="/patient-summary"
+              sx={{
+                ...(pathname === '/patient-summary' && ACTIVE_BUTTON_STYLE),
+              }}
             >
-              Patient Summary View
+              <Article
+                sx={{ color: '#eee', paddingRight: '4px', marginRight: '3px' }}
+              />
+              Summary View
             </MenuItem>
-            <MenuItem key="dashboard" component={NextLink} href="/shared-links">
+            <MenuItem
+              key="dashboard"
+              component={NextLink}
+              href="/shared-links"
+              sx={{
+                ...(pathname === '/shared-links' && ACTIVE_BUTTON_STYLE),
+              }}
+            >
+              <Dashboard
+                sx={{ color: '#eee', paddingRight: '4px', marginRight: '3px' }}
+              />
               Dashboard
             </MenuItem>
           </>

src/app/components/Login.tsx

@@ -1,16 +1,21 @@
 'use client';
 
-import { Button } from '@mui/material';
+import { Login as LoginIcon } from '@mui/icons-material';
 import { signIn } from 'next-auth/react';
 
+import { StyledButton } from './StyledButton';
+
 export default function Login() {
   return (
-    <Button
+    <StyledButton
       onClick={() => signIn('keycloak')}
       variant="contained"
       color="secondary"
     >
+      <LoginIcon
+        sx={{ color: '#eee', paddingRight: '4px', marginRight: '4px' }}
+      />
       Sign in
-    </Button>
+    </StyledButton>
   );
 }

src/app/components/Logout.tsx

@@ -1,12 +1,21 @@
 'use client';
-
-import { Button, Typography } from '@mui/material';
+import { Logout as LogoutIcon } from '@mui/icons-material';
+import { Tooltip } from '@mui/material';
 import { signOut } from 'next-auth/react';
 
+import { StyledButton } from './StyledButton';
+
 export default function Logout() {
   return (
-    <Button onClick={() => signOut()} variant="contained" color="secondary">
-      <Typography>Sign out</Typography>
-    </Button>
+    <Tooltip title="Sign out">
+      <StyledButton
+        size="small"
+        onClick={() => signOut()}
+        variant="contained"
+        color="error"
+      >
+        <LogoutIcon sx={{ color: '#eee' }}></LogoutIcon>
+      </StyledButton>
+    </Tooltip>
   );
 }

src/app/components/StyledButton.tsx

@@ -0,0 +1,5 @@
+import { Button, styled } from '@mui/material';
+
+export const StyledButton = styled(Button)(() => ({
+  backgroundImage: 'linear-gradient(to bottom, hsla(0, 0%, 90%, .05), #0004)',
+}));

src/app/components/StyledDialogActions.tsx

@@ -4,5 +4,7 @@ export const StyledDialogActions = styled(DialogActions)(() => ({
   paddingTop: '15px',
   paddingRight: '25px',
   paddingBottom: '15px',
+  paddingLeft: '25px',
   backgroundImage: 'linear-gradient(to top, hsla(0, 0%, 90%, .05), #e6e6e6)',
+  justifyContent: 'space-between',
 }));

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import { Grid } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import type { Metadata } from 'next';
@@ -8,6 +9,7 @@ import Footer from './components/Footer';
 import Header from './components/Header';
 import AuthProvider from './context/AuthProvider';
 import theme from './theme';
+
 import './globals.css';
 
 export const metadata: Metadata = {
@@ -30,7 +32,12 @@ export default async function RootLayout({
           <ThemeProvider theme={theme}>
             <AuthProvider session={session}>
               <Header />
-              {children}
+              <Grid
+                sx={{ alignContent: 'center' }}
+                minHeight={'calc(100vh - 137px)'}
+              >
+                {children}
+              </Grid>
               <Footer />
             </AuthProvider>
           </ThemeProvider>

src/app/page.tsx

@@ -18,8 +18,7 @@ export default function Home() {
           Welcome to Smart Health Links Portal!
         </Typography>
         <Typography variant="body1" align="center">
-          {' '}
-            Share your medical data with confidence
+          Share your medical data with confidence
         </Typography>
       </Box>
     </Container>

src/app/patient-summary/page.tsx

@@ -20,8 +20,8 @@ export default function PatientSummaryPage() {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await apiIps.getPatientData(user.id);
-        setFhirBundle(response.data);
+        const { data } = await apiIps.getPatientData(user.id);
+        setFhirBundle(data);
       } catch (error) {
         setError(error.message);
       } finally {

src/app/services/api.class.ts

@@ -1,11 +1,6 @@
-import axios, { type AxiosResponse, type AxiosInstance } from 'axios';
+import axios, { type AxiosInstance } from 'axios';
 
-import type {
-  IApi,
-  TOperation,
-  TBaseApiProps,
-  IApiWithPayload,
-} from './api.types';
+import type { IApi, TBaseApiProps, IApiWithPayload } from './api.types';
 
 export const instance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,
@@ -14,43 +9,32 @@ export const instance = axios.create({
 export class BaseApi<T extends TBaseApiProps<T>> {
   constructor(protected readonly instance: AxiosInstance) {}
 
-  async create<TCreate extends T['create']>({
+  async create<TC extends T['create']>({
     url,
     data,
     config = {},
-  }: IApiWithPayload<TCreate['req']>): Promise<AxiosResponse<TCreate['res']>> {
-    return this.instance.post(url, data, config);
+  }: IApiWithPayload<TC['req']>) {
+    return this.instance.post<TC['res']>(url, data, config);
   }
 
-  async find<TRead extends T['read']>({
-    url,
-    config = {},
-  }: IApi): Promise<AxiosResponse<TRead[]>> {
-    return this.instance.get(url, config);
+  async find({ url, config = {} }: IApi) {
+    return this.instance.get<T['read'][]>(url, config);
   }
 
-  async get<TRead extends T['read']>({
-    url,
-    config = {},
-  }: IApi): Promise<AxiosResponse<TRead>> {
-    return this.instance.get(url, config);
+  async get({ url, config = {} }: IApi) {
+    return this.instance.get<T['read']>(url, config);
   }
 
-  async update<TUpdate extends T['update']>({
+  async update<TU extends T['update']>({
     url,
     data,
     config = {},
-  }: IApiWithPayload<TOperation<TUpdate>['req']>): Promise<
-    AxiosResponse<TOperation<TUpdate>['res']>
-  > {
-    return this.instance.put(url, data, config);
+  }: IApiWithPayload<TU['req']>) {
+    return this.instance.put<TU['res']>(url, data, config);
   }
 
-  async delete<TDelete extends T['delete']>({
-    url,
-    config = {},
-  }: IApi): Promise<AxiosResponse<TDelete>> {
-    return this.instance.delete(url, config);
+  async delete({ url, config = {} }: IApi) {
+    return this.instance.delete<T['delete']>(url, config);
   }
 }
 

src/app/services/api.types.ts

@@ -9,6 +9,7 @@ import type {
   SHLinkEndpointDto,
   CreateSHLinkEndpointDto,
 } from '@/domain/dtos/shlink-endpoint';
+import { SHLinkQRCodeRequestDto } from '@/domain/dtos/shlink-qrcode';
 import { type TBundle } from '@/types/fhir.types';
 
 export interface IApi {
@@ -68,7 +69,7 @@ export interface IPathMapTypes {
   };
   [EPath.qrCode]: {
     create: {
-      req: never;
+      req: SHLinkQRCodeRequestDto;
       res: never;
     };
     read: never;

src/app/services/endpoints/qr-code.class.ts

@@ -16,7 +16,7 @@ export class QrCode<
     super(instance);
   }
 
-  async getQrCode(linkId: string, data: object) {
+  async getQrCode(linkId: string, data: TOperations['create']['req']) {
     return await this.create({
       url: `/${EPath.shareLinks}/${linkId}/qrcode`,
       data,