update

src/app/(main)/layout.tsx

@@ -10,6 +10,7 @@ import { AxiosProvider } from "@/app/(main)/axios/AxiosProvider";
 import { SetupAxiosInterceptors } from "@/app/(main)/axios/axiosInstance";
 import { CameraProvider } from "@/components/Cameras/CameraProvider";
 import { UploadProvider } from "@/components/UploadProvider/UploadProvider";
+import QrCodeScannerProvider from "@/components/QrCodeScannerProvider/QrCodeScannerProvider";
 
 export default async function MainLayout({
   children,
@@ -30,24 +31,26 @@ export default async function MainLayout({
     <UploadProvider>
       <CameraProvider>
         <AxiosProvider>
-          <>
-            <AppBar
-              profileName={session.user.name!}
-              avatarImageSrc={session.user.image || undefined}
-            />
-            <Box
-              component="main"
-              sx={{
-                marginInlineStart: { xs: 0, xl: NAVIGATION_CONTENT_WIDTH },
-                padding: { xs: "1rem", sm: "1.5rem", lg: "3rem" },
-              }}
-            >
-              <Stack spacing={2}>
-                <Breadcrumb />
-                {children}
-              </Stack>
-            </Box>
-          </>
+          <QrCodeScannerProvider>
+            <>
+              <AppBar
+                profileName={session.user.name!}
+                avatarImageSrc={session.user.image || undefined}
+              />
+              <Box
+                component="main"
+                sx={{
+                  marginInlineStart: { xs: 0, xl: NAVIGATION_CONTENT_WIDTH },
+                  padding: { xs: "1rem", sm: "1.5rem", lg: "3rem" },
+                }}
+              >
+                <Stack spacing={2}>
+                  <Breadcrumb />
+                  {children}
+                </Stack>
+              </Box>
+            </>
+          </QrCodeScannerProvider>
         </AxiosProvider>
       </CameraProvider>
     </UploadProvider>