From db031485218aa63b38ceae904a9f0a140476d3ca Mon Sep 17 00:00:00 2001
From: Yasith-Heshan <81988554+Yasith-Heshan@users.noreply.github.com>
Date: Sat, 12 Aug 2023 20:30:59 +0530
Subject: [PATCH 1/5] Fingerprint results dialog

---
 public/assets/images/fingerprint_failed.jpg   | Bin 0 -> 6452 bytes
 public/assets/images/fingerprint_success.jpg  | Bin 0 -> 6659 bytes
 src/components/FingerPrintResults.tsx         | 126 ++++++++++++++++++
 .../check-in-out/CheckInOutContainer.tsx      |  57 +++++++-
 src/services/FingerprintAuthServices.ts       |   3 +-
 src/types.ts                                  |  12 +-
 6 files changed, 190 insertions(+), 8 deletions(-)
 create mode 100644 public/assets/images/fingerprint_failed.jpg
 create mode 100644 public/assets/images/fingerprint_success.jpg
 create mode 100644 src/components/FingerPrintResults.tsx

diff --git a/public/assets/images/fingerprint_failed.jpg b/public/assets/images/fingerprint_failed.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bff187dd3aba3b01a819dd5c9403397fb039a771
GIT binary patch
literal 6452
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
T0t#y#{JM4CclWUYc)#>N5=|bD

literal 0
HcmV?d00001

diff --git a/public/assets/images/fingerprint_success.jpg b/public/assets/images/fingerprint_success.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1074c56f4fa635e99231f7ba8ad56b1b6a26481c
GIT binary patch
literal 6659
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
TaCaU70So=$6>D7Q$Ho5v=lM%E

literal 0
HcmV?d00001

diff --git a/src/components/FingerPrintResults.tsx b/src/components/FingerPrintResults.tsx
new file mode 100644
index 0000000..3328be5
--- /dev/null
+++ b/src/components/FingerPrintResults.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import {styled} from '@mui/material/styles';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
+import Grid from "@mui/material/Grid";
+import {FingerPrintDetails, SetDialogOpenFunction} from "../types";
+
+const BootstrapDialog = styled(Dialog)(({theme}) => ({
+  '& .MuiDialogContent-root': {
+    padding: theme.spacing(2),
+  },
+  '& .MuiDialogActions-root': {
+    padding: theme.spacing(1),
+  },
+}));
+
+export interface DialogTitleProps {
+  id: string;
+  children?: React.ReactNode;
+  onClose: () => void;
+}
+
+function BootstrapDialogTitle(props: DialogTitleProps) {
+  const {children, onClose, ...other} = props;
+
+  return (
+    <DialogTitle sx={{m: 0, p: 2}} {...other}>
+      {children}
+      {onClose ? (
+        <IconButton
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 1,
+            top: 0,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <CloseIcon/>
+        </IconButton>
+      ) : null}
+    </DialogTitle>
+  );
+}
+
+
+export const FingerPrintResults = ({
+                                     open,
+                                     setOpen,
+                                     access,
+                                     booking
+                                   }: { open: boolean, setOpen: SetDialogOpenFunction, access: boolean, booking: FingerPrintDetails }) => {
+
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+
+      <BootstrapDialog
+        onClose={handleClose}
+        aria-labelledby="customized-dialog-title"
+        open={open}
+      >
+        <BootstrapDialogTitle id="customized-dialog-title" onClose={handleClose}>
+        </BootstrapDialogTitle>
+        <DialogContent dividers>
+          {
+            access ? (
+              <>
+                <Grid container direction={'column'} alignItems={'center'} justifyContent={'center'}>
+                  <img style={{borderRadius: '50%'}}
+                       src={window.location.origin + '/assets/images/fingerprint_success.jpg'}
+                       alt={'fingerprint success'}/>
+                </Grid>
+                <Grid container direction={"column"} alignItems={'center'} justifyContent={'center'}>
+                <Typography variant={"h6"} color={'green'} fontWeight={'bold'}>
+                  Successfully Recognized
+                </Typography>
+
+                  <Typography variant={'h4'} fontWeight={"bold"}>
+                    {booking.username}
+                  </Typography>
+                </Grid>
+                <Grid mt={2} spacing={2} container direction={"row"} alignItems={'center'} justifyContent={'space-between'}>
+                  <Grid item>
+                    <Typography variant={'body2'}>
+                      {booking.timeslot}
+                    </Typography>
+                  </Grid>
+                  <Grid item>
+                  </Grid>
+                  <Grid item>
+                    <Typography variant={'body2'}>
+                      Count: {booking.count}
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </>
+            ) : (
+              <>
+                <Grid container direction={'column'} alignItems={'center'} justifyContent={'center'}>
+                  <img style={{borderRadius: '50%'}}
+                       src={window.location.origin + '/assets/images/fingerprint_failed.jpg'}
+                       alt={'fingerprint success'}/>
+                </Grid>
+                <Typography gutterBottom variant={"h6"} color={'red'} mt={1}>
+                  No Booking for this Timeslot
+                </Typography>
+              </>
+            )
+          }
+
+
+        </DialogContent>
+      </BootstrapDialog>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/check-in-out/CheckInOutContainer.tsx b/src/pages/check-in-out/CheckInOutContainer.tsx
index 2c29f5b..1819d7a 100644
--- a/src/pages/check-in-out/CheckInOutContainer.tsx
+++ b/src/pages/check-in-out/CheckInOutContainer.tsx
@@ -12,8 +12,12 @@ import { socket } from "../../helpers/socket";
 import { AppState } from "../../redux/reducer";
 import FingerprintAuthServices from "../../services/FingerprintAuthServices";
 import ResourcesServices from "../../services/ResourcesServices";
-import { Resource, User } from "../../types";
+import {FingerPrintDetails, Resource, User} from "../../types";
 import FingerprintUi from "./FingerprintUI";
+import {FingerPrintResults} from "../../components/FingerPrintResults";
+import dayjs from "dayjs";
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+
 
 const dashboardTheme = createTheme({
   palette: {
@@ -32,6 +36,10 @@ export default function CheckInOutContainer() {
   const { resourceId } = useParams();
   const navigate = useNavigate();
 
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [access, setAccess] = useState(false);
+  const [booking, setBooking] = useState<FingerPrintDetails|null>(null);
+
   useEffect(() => {
     if (!user) {
       navigate("/");
@@ -73,11 +81,34 @@ export default function CheckInOutContainer() {
           fingerprintData,
           user.token
         );
-      console.log(authenticationData);
-      const { username } = authenticationData.data;
-      console.log(username);
-      setScannerActive(false);
-      // TODO: Display the result
+      if(authenticationData){
+        const { username,startTime,endTime,count } = authenticationData.data;
+
+        dayjs.extend(localizedFormat);
+        const booking:FingerPrintDetails = {
+          username,
+          count,
+          timeslot:dayjs(startTime).format('L LT')+'-'+dayjs(endTime).format('LT')
+        }
+        setBooking(booking);
+
+        setAccess(true);
+        setScannerActive(false);
+        setDialogOpen(true);
+      }else {
+        setAccess(false);
+        setDialogOpen(true);
+      }
+
+      setTimeout(
+        ()=>{
+          setBooking(null);
+          setAccess(false)
+          setDialogOpen(false)
+        },5000
+      )
+
+
     });
   }, [resource]);
 
@@ -88,6 +119,9 @@ export default function CheckInOutContainer() {
     socket.emit("fingerprint", 3);
   }
 
+
+
+
   return (
     <ThemeProvider theme={dashboardTheme}>
       <CssBaseline />
@@ -98,15 +132,26 @@ export default function CheckInOutContainer() {
           <Toolbar />
           <Box sx={{ my: 5 }}>
             {resource && (
+              <>
               <FingerprintUi
                 resourceName={resource.name}
                 scannerActive={scannerActive}
                 requestFingerprint={requestFingerprint}
               />
+                <FingerPrintResults
+                  open={dialogOpen}
+                  setOpen={setDialogOpen}
+                  access={access}
+                  booking={booking}
+                />
+
+              </>
+
             )}
             {!resource && (
               <Typography variant="h4">Resource not found.</Typography>
             )}
+
           </Box>
           <Copyright />
         </Container>
diff --git a/src/services/FingerprintAuthServices.ts b/src/services/FingerprintAuthServices.ts
index 4976f57..9e4eae2 100644
--- a/src/services/FingerprintAuthServices.ts
+++ b/src/services/FingerprintAuthServices.ts
@@ -15,7 +15,8 @@ const fpAuthenticate = async (
     const response = await axios.patch("/bookings", data);
     return response.data;
   } catch (error) {
-    return error;
+    console.error(error);
+    return null;
   }
 };
 
diff --git a/src/types.ts b/src/types.ts
index 8c264f1..f5c0561 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,5 @@
+import * as React from "react";
+
 export type Resource = {
     id: string;
     name: string;
@@ -45,4 +47,12 @@ export type BookingForm = {
 
 export const ADMIN = 'ADMIN';
 export const RESOURCE_MANAGER = 'RESOURCE_MANAGER';
-export const RESOURCE_USER = 'RESOURCE_USER';
\ No newline at end of file
+export const RESOURCE_USER = 'RESOURCE_USER';
+
+export type SetDialogOpenFunction = React.Dispatch<React.SetStateAction<boolean>>;
+export type FingerPrintDetails = {
+    username: string,
+    count: number,
+    timeslot: string,
+
+}
\ No newline at end of file

From 6268ea00fbe89dd40e04c8015cdcb2c103610dce Mon Sep 17 00:00:00 2001
From: Yasith-Heshan <81988554+Yasith-Heshan@users.noreply.github.com>
Date: Sat, 12 Aug 2023 22:47:02 +0530
Subject: [PATCH 2/5] Fix issues mentioned in review

---
 src/components/FingerPrintResults.tsx         | 17 ++---
 .../check-in-out/CheckInOutContainer.tsx      | 62 +++++++++----------
 .../view-resources/ViewResourcesContainer.tsx | 35 +++++++----
 src/services/FingerprintAuthServices.ts       |  1 -
 4 files changed, 64 insertions(+), 51 deletions(-)

diff --git a/src/components/FingerPrintResults.tsx b/src/components/FingerPrintResults.tsx
index 3328be5..afa40af 100644
--- a/src/components/FingerPrintResults.tsx
+++ b/src/components/FingerPrintResults.tsx
@@ -8,6 +8,8 @@ import CloseIcon from '@mui/icons-material/Close';
 import Typography from '@mui/material/Typography';
 import Grid from "@mui/material/Grid";
 import {FingerPrintDetails, SetDialogOpenFunction} from "../types";
+import FingerPrintFailed from '../../public/assets/images/fingerprint_failed.jpg'
+import FingerPrintSuccess from '../../public/assets/images/fingerprint_success.jpg'
 
 const BootstrapDialog = styled(Dialog)(({theme}) => ({
   '& .MuiDialogContent-root': {
@@ -77,19 +79,20 @@ export const FingerPrintResults = ({
               <>
                 <Grid container direction={'column'} alignItems={'center'} justifyContent={'center'}>
                   <img style={{borderRadius: '50%'}}
-                       src={window.location.origin + '/assets/images/fingerprint_success.jpg'}
+                       src={FingerPrintSuccess}
                        alt={'fingerprint success'}/>
                 </Grid>
-                <Grid container direction={"column"} alignItems={'center'} justifyContent={'center'}>
-                <Typography variant={"h6"} color={'green'} fontWeight={'bold'}>
-                  Successfully Recognized
-                </Typography>
+                <Grid mt={1} container direction={"column"} alignItems={'center'} justifyContent={'center'}>
+                  <Typography variant={"h6"} color={'green'} fontWeight={'bold'}>
+                    Successfully Recognized
+                  </Typography>
 
                   <Typography variant={'h4'} fontWeight={"bold"}>
                     {booking.username}
                   </Typography>
                 </Grid>
-                <Grid mt={2} spacing={2} container direction={"row"} alignItems={'center'} justifyContent={'space-between'}>
+                <Grid mt={2} spacing={2} container direction={"row"} alignItems={'center'}
+                      justifyContent={'space-between'}>
                   <Grid item>
                     <Typography variant={'body2'}>
                       {booking.timeslot}
@@ -108,7 +111,7 @@ export const FingerPrintResults = ({
               <>
                 <Grid container direction={'column'} alignItems={'center'} justifyContent={'center'}>
                   <img style={{borderRadius: '50%'}}
-                       src={window.location.origin + '/assets/images/fingerprint_failed.jpg'}
+                       src={FingerPrintFailed}
                        alt={'fingerprint success'}/>
                 </Grid>
                 <Typography gutterBottom variant={"h6"} color={'red'} mt={1}>
diff --git a/src/pages/check-in-out/CheckInOutContainer.tsx b/src/pages/check-in-out/CheckInOutContainer.tsx
index 1819d7a..90a8c35 100644
--- a/src/pages/check-in-out/CheckInOutContainer.tsx
+++ b/src/pages/check-in-out/CheckInOutContainer.tsx
@@ -1,15 +1,15 @@
-import { Box, Container, Toolbar, Typography } from "@mui/material";
+import {Box, Container, Toolbar, Typography} from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
-import { createTheme } from "@mui/material/styles";
+import {createTheme} from "@mui/material/styles";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
-import { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import { useNavigate, useParams } from "react-router-dom";
+import {useEffect, useState} from "react";
+import {useSelector} from "react-redux";
+import {useNavigate, useParams} from "react-router-dom";
 import AppbarComponent from "../../components/AppbarComponent";
 import Copyright from "../../components/Copyright";
 import DrawerComponent from "../../components/DrawerComponent";
-import { socket } from "../../helpers/socket";
-import { AppState } from "../../redux/reducer";
+import {socket} from "../../helpers/socket";
+import {AppState} from "../../redux/reducer";
 import FingerprintAuthServices from "../../services/FingerprintAuthServices";
 import ResourcesServices from "../../services/ResourcesServices";
 import {FingerPrintDetails, Resource, User} from "../../types";
@@ -33,12 +33,12 @@ const dashboardTheme = createTheme({
 export default function CheckInOutContainer() {
   const [resource, setResource] = useState<Resource | null>(null);
   const user: User | null = useSelector((state: AppState) => state.user.user);
-  const { resourceId } = useParams();
+  const {resourceId} = useParams();
   const navigate = useNavigate();
 
   const [dialogOpen, setDialogOpen] = useState(false);
   const [access, setAccess] = useState(false);
-  const [booking, setBooking] = useState<FingerPrintDetails|null>(null);
+  const [booking, setBooking] = useState<FingerPrintDetails | null>(null);
 
   useEffect(() => {
     if (!user) {
@@ -81,31 +81,32 @@ export default function CheckInOutContainer() {
           fingerprintData,
           user.token
         );
-      if(authenticationData){
-        const { username,startTime,endTime,count } = authenticationData.data;
+      if (authenticationData) {
+        const {username, startTime, endTime, count} = authenticationData.data;
 
         dayjs.extend(localizedFormat);
-        const booking:FingerPrintDetails = {
+        const booking: FingerPrintDetails = {
           username,
           count,
-          timeslot:dayjs(startTime).format('L LT')+'-'+dayjs(endTime).format('LT')
+          timeslot: dayjs(startTime).format('L LT') + '-' + dayjs(endTime).format('LT')
         }
         setBooking(booking);
 
         setAccess(true);
         setScannerActive(false);
         setDialogOpen(true);
-      }else {
+      } else {
         setAccess(false);
         setDialogOpen(true);
       }
 
       setTimeout(
-        ()=>{
+        () => {
+          setScannerActive(false);
           setBooking(null);
           setAccess(false)
           setDialogOpen(false)
-        },5000
+        }, 5000
       )
 
 
@@ -120,31 +121,28 @@ export default function CheckInOutContainer() {
   }
 
 
-
-
   return (
     <ThemeProvider theme={dashboardTheme}>
-      <CssBaseline />
-      <Box sx={{ display: "flex" }}>
-        <AppbarComponent open={open} toggleDrawer={toggleDrawer} />
-        <DrawerComponent open={open} toggleDrawer={toggleDrawer} />
-        <Container component="main" sx={{ mb: 4 }}>
-          <Toolbar />
-          <Box sx={{ my: 5 }}>
+      <CssBaseline/>
+      <Box sx={{display: "flex"}}>
+        <AppbarComponent open={open} toggleDrawer={toggleDrawer}/>
+        <DrawerComponent open={open} toggleDrawer={toggleDrawer}/>
+        <Container component="main" sx={{mb: 4}}>
+          <Toolbar/>
+          <Box sx={{my: 5}}>
             {resource && (
               <>
-              <FingerprintUi
-                resourceName={resource.name}
-                scannerActive={scannerActive}
-                requestFingerprint={requestFingerprint}
-              />
+                <FingerprintUi
+                  resourceName={resource.name}
+                  scannerActive={scannerActive}
+                  requestFingerprint={requestFingerprint}
+                />
                 <FingerPrintResults
                   open={dialogOpen}
                   setOpen={setDialogOpen}
                   access={access}
                   booking={booking}
                 />
-
               </>
 
             )}
@@ -153,7 +151,7 @@ export default function CheckInOutContainer() {
             )}
 
           </Box>
-          <Copyright />
+          <Copyright/>
         </Container>
       </Box>
     </ThemeProvider>
diff --git a/src/pages/view-resources/ViewResourcesContainer.tsx b/src/pages/view-resources/ViewResourcesContainer.tsx
index 88d3c5c..fa8fe85 100644
--- a/src/pages/view-resources/ViewResourcesContainer.tsx
+++ b/src/pages/view-resources/ViewResourcesContainer.tsx
@@ -20,6 +20,7 @@ import resourcesServices from "src/services/ResourcesServices";
 import {Booking, Resource, User} from "../../types";
 import {useSelector} from "react-redux";
 import {AppState} from "../../redux/reducer";
+import Grid from "@mui/material/Grid";
 
 const dashboardTheme = createTheme({
   palette: {
@@ -91,14 +92,14 @@ function ResourceCard({resource}: { resource: Resource }) {
     setExpanded(!expanded);
   };
 
-  const handleEditStart = (e: any) => {
+  const handleEditStart = () => {
     setExpanded(false);
     setName(resource.name);
     setCount(resource.count)
     setEditStarted(true);
   };
 
-  const handleUpdate = async (e: any) => {
+  const handleUpdate = async () => {
     if (!nameError && !countError) {
       await resourcesServices.updateResource(parseInt(resource.id), name, count,token);
       setEditStarted(false);
@@ -189,14 +190,26 @@ function ResourceCard({resource}: { resource: Resource }) {
         >
           {
             !editStarted ? (
-              <Button
-                disabled={role!='ADMIN'}
-                variant="contained"
-                onClick={handleEditStart}
-                sx={{backgroundColor: "green", color: "white"}}
-              >
-                Edit Resource
-              </Button>
+              <Grid container direction={'row'} spacing={1} justifyContent={'end'}>
+                <Grid item>
+                  <Button
+                    disabled={role!='ADMIN'}
+                    variant="contained"
+                    sx={{backgroundColor: "primary", color: "white"}}
+                  ><a style={{textDecoration:"none", color:"white"}} href={`resources/${resource.id}/check-in-out`}>Check-ins</a></Button>
+                </Grid>
+                <Grid item>
+                  <Button
+                    disabled={role!='ADMIN'}
+                    variant="contained"
+                    onClick={handleEditStart}
+                    sx={{backgroundColor: "green", color: "white"}}
+                  >
+                    Edit Resource
+                  </Button>
+                </Grid>
+              </Grid>
+
             ) : (
               <Button
                 variant="contained"
@@ -211,7 +224,7 @@ function ResourceCard({resource}: { resource: Resource }) {
           {
             editStarted && (
               <Button onClick={
-                (e) => {
+                () => {
                   setEditStarted(false);
                 }
               }>Cancel</Button>
diff --git a/src/services/FingerprintAuthServices.ts b/src/services/FingerprintAuthServices.ts
index 9e4eae2..e13136c 100644
--- a/src/services/FingerprintAuthServices.ts
+++ b/src/services/FingerprintAuthServices.ts
@@ -15,7 +15,6 @@ const fpAuthenticate = async (
     const response = await axios.patch("/bookings", data);
     return response.data;
   } catch (error) {
-    console.error(error);
     return null;
   }
 };

From e749d9ec9b3b89cb6797ef4d3625515352f37242 Mon Sep 17 00:00:00 2001
From: Yasith-Heshan <81988554+Yasith-Heshan@users.noreply.github.com>
Date: Sun, 13 Aug 2023 00:50:54 +0530
Subject: [PATCH 3/5] Fix 400 issue

---
 src/index.tsx                                 |  4 ++--
 .../check-in-out/CheckInOutContainer.tsx      | 20 ++++++++++++-------
 src/services/FingerprintAuthServices.ts       |  7 +++++--
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 6bb2ae7..4f5dac1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,7 +5,7 @@ import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-    <React.StrictMode>
+    // <React.StrictMode>
         <App/>
-    </React.StrictMode>
+    // </React.StrictMode>
 );
\ No newline at end of file
diff --git a/src/pages/check-in-out/CheckInOutContainer.tsx b/src/pages/check-in-out/CheckInOutContainer.tsx
index 90a8c35..fd2d63e 100644
--- a/src/pages/check-in-out/CheckInOutContainer.tsx
+++ b/src/pages/check-in-out/CheckInOutContainer.tsx
@@ -75,13 +75,15 @@ export default function CheckInOutContainer() {
   useEffect(() => {
     if (resource === null) return;
     socket.on("fingerprintData", async (fingerprintData) => {
+      try {
+
       const authenticationData: any =
         await FingerprintAuthServices.fpAuthenticate(
           parseInt(resource.id),
           fingerprintData,
           user.token
         );
-      if (authenticationData) {
+
         const {username, startTime, endTime, count} = authenticationData.data;
 
         dayjs.extend(localizedFormat);
@@ -95,19 +97,23 @@ export default function CheckInOutContainer() {
         setAccess(true);
         setScannerActive(false);
         setDialogOpen(true);
-      } else {
+      }catch (error:any){
         setAccess(false);
-        setDialogOpen(true);
+        if(error.message==='400'){
+          setDialogOpen(true);
+        }else{
+          setDialogOpen(false);
+        }
       }
 
       setTimeout(
         () => {
+          setDialogOpen(false);
           setScannerActive(false);
-          setBooking(null);
-          setAccess(false)
-          setDialogOpen(false)
+          // setBooking(null);
+          // setAccess(false);
         }, 5000
-      )
+      );
 
 
     });
diff --git a/src/services/FingerprintAuthServices.ts b/src/services/FingerprintAuthServices.ts
index e13136c..f928f20 100644
--- a/src/services/FingerprintAuthServices.ts
+++ b/src/services/FingerprintAuthServices.ts
@@ -14,8 +14,11 @@ const fpAuthenticate = async (
     axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
     const response = await axios.patch("/bookings", data);
     return response.data;
-  } catch (error) {
-    return null;
+  } catch (error:any) {
+    if(error.response.status){
+      throw new Error('400');
+    }
+    throw new Error('unknown');
   }
 };
 

From cd10a798d4c821425f678b4ac76a47a4f65924fb Mon Sep 17 00:00:00 2001
From: Yasith-Heshan <81988554+Yasith-Heshan@users.noreply.github.com>
Date: Sun, 13 Aug 2023 00:54:25 +0530
Subject: [PATCH 4/5] Fix Mosip --> CSE

---
 src/pages/view-resources/ViewResourcesContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/view-resources/ViewResourcesContainer.tsx b/src/pages/view-resources/ViewResourcesContainer.tsx
index fa8fe85..4f91ff8 100644
--- a/src/pages/view-resources/ViewResourcesContainer.tsx
+++ b/src/pages/view-resources/ViewResourcesContainer.tsx
@@ -345,7 +345,7 @@ export default function ViewResourcesContainer() {
           </Box>
           <Box sx={{mt: 4}}>
             <Typography variant="body2" color="text.secondary" align="center">
-              © {new Date().getFullYear()} MOSIP
+              © {new Date().getFullYear()} CSE
             </Typography>
           </Box>
         </Container>

From 210f79e69cb3c66378db9a96b05bee0117cd8ace Mon Sep 17 00:00:00 2001
From: Yasith-Heshan <81988554+Yasith-Heshan@users.noreply.github.com>
Date: Sun, 13 Aug 2023 14:03:12 +0530
Subject: [PATCH 5/5] remove commented lines

---
 src/index.tsx                                  | 4 ++--
 src/pages/check-in-out/CheckInOutContainer.tsx | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 4f5dac1..6bb2ae7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,7 +5,7 @@ import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-    // <React.StrictMode>
+    <React.StrictMode>
         <App/>
-    // </React.StrictMode>
+    </React.StrictMode>
 );
\ No newline at end of file
diff --git a/src/pages/check-in-out/CheckInOutContainer.tsx b/src/pages/check-in-out/CheckInOutContainer.tsx
index fd2d63e..dae8a46 100644
--- a/src/pages/check-in-out/CheckInOutContainer.tsx
+++ b/src/pages/check-in-out/CheckInOutContainer.tsx
@@ -110,8 +110,6 @@ export default function CheckInOutContainer() {
         () => {
           setDialogOpen(false);
           setScannerActive(false);
-          // setBooking(null);
-          // setAccess(false);
         }, 5000
       );