update qrcode

BACKEND/Modules/Auth/app/Http/Controllers/UserController.php

@@ -7,8 +7,10 @@ use App\Traits\IsAPI;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
 use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Storage;
 use Modules\Auth\app\Models\User;
 use Illuminate\Support\Str;
+use SimpleSoftwareIO\QrCode\Facades\QrCode;
 
 class UserController extends Controller
 {
@@ -107,4 +109,27 @@ class UserController extends Controller
 
         return response()->json(['status' => false, 'message' => 'User not found']);
     }
+
+    public function qrcode($userId)
+    {
+        $user = User::find($userId);
+        // Define the QR code content
+        $qrCodeContent = $user->name . "\n" . $user->permisson . "\n\n";
+
+        // Define the file path
+        $fileName = 'qrcode_' . $userId . '.svg';
+        $filePath = 'qrcode/' . $fileName;
+
+        if ($user) {
+            if (!$user->qrcode) {
+                // Generate the QR code and save it to storage
+                QrCode::size(500)->margin(2)->generate($qrCodeContent, Storage::path('public/'.$filePath));
+                // Update the user's record with the QR code file path
+                $user->qrcode = $filePath;
+                $user->save();
+            }
+        }
+
+        return response()->json(['status' => true]);
+    }
 }

BACKEND/Modules/Auth/routes/api.php

@@ -26,6 +26,7 @@ Route::middleware(['api'])
         Route::middleware(['jwt.auth'])->get('users', [UserController::class, 'users']);
         Route::middleware(['jwt.auth'])->post('users/createOrUpdate', [UserController::class, 'createOrUpdate']);
         Route::middleware(['jwt.auth'])->get('users/delete', [UserController::class, 'delete']);
+        Route::middleware(['jwt.auth'])->get('users/qrcode/{userId}', [UserController::class, 'qrcode']);
 
         Route::post('login', [LoginController::class, 'login']);
         Route::middleware(['jwt.auth'])->post('logout', [LoginController::class, 'logout']);

BACKEND/composer.json

@@ -17,6 +17,7 @@
         "nwidart/laravel-modules": "^10.0",
         "pion/laravel-chunk-upload": "^1.5",
         "predis/predis": "^2.2",
+        "simplesoftwareio/simple-qrcode": "^4.2",
         "spatie/laravel-permission": "^6.1",
         "srmklive/paypal": "^3.0",
         "tymon/jwt-auth": "^2.0"

BACKEND/config/app.php

@@ -170,6 +170,7 @@ return [
         App\Providers\RouteServiceProvider::class,
         Barryvdh\Debugbar\ServiceProvider::class,
         Spatie\Permission\PermissionServiceProvider::class,
+        SimpleSoftwareIO\QrCode\QrCodeServiceProvider::class,
 
     ])->toArray(),
 
@@ -189,5 +190,6 @@ return [
         'JWTFactory' => Tymon\JWTAuth\Facades\JWTFactory::class,
         'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class,
         'SettingCacheHelper'   => App\Helper\Cache\SettingCacheHelper::class,
+        'QrCode' => SimpleSoftwareIO\QrCode\Facades\QrCode::class,
     ])->toArray(),
 ];

BACKEND/database/migrations/2024_09_06_165915_add_qrcode_to_users_table.php

@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            Schema::table('users', function (Blueprint $table) {
+                $table->string('qrcode')->nullable();
+            });
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('qrcode');
+        });
+    }
+};

FRONTEND/index.html

@@ -5,7 +5,7 @@
     <link
       rel="icon"
       type="image/svg+xml"
-      href="https://cdn-icons-png.freepik.com/512/5902/5902216.png"
+      href="./public/logo.ico"
     />
     <meta
       name="viewport"

FRONTEND/src/api/Admin.ts

@@ -42,3 +42,4 @@ export const handleTicket = API_URL + 'v1/admin/ticket/handle-ticket'
 export const getAllUsers = API_URL + 'v1/users'
 export const createOrUpdateUser = API_URL + 'v1/users/createOrUpdate'
 export const deleteUser = API_URL + 'v1/users/delete'
+export const getQRCode = API_URL + 'v1/users/qrcode'

FRONTEND/src/components/Navbar/Navbar.tsx

@@ -1,6 +1,7 @@
+import { getQRCode } from '@/api/Admin'
 import { changePassword } from '@/api/Auth'
 import { logout } from '@/rtk/dispatches/auth'
-import { post } from '@/rtk/helpers/apiService'
+import { get, post } from '@/rtk/helpers/apiService'
 import { requirementsPassword } from '@/rtk/helpers/variables'
 import { useAppDispatch, useAppSelector } from '@/rtk/hooks'
 import {
@@ -13,6 +14,7 @@ import {
   PasswordInput,
   Text,
   TextInput,
+  Tooltip,
   useComputedColorScheme,
   useMantineColorScheme,
 } from '@mantine/core'
@@ -20,17 +22,18 @@ import { notifications } from '@mantine/notifications'
 import {
   IconCalendar,
   IconCalendarClock,
+  IconDevices,
   IconLayoutSidebarLeftExpand,
   IconLayoutSidebarRightExpand,
   IconLogout,
   // IconMail,
   IconMoon,
   IconPasswordUser,
+  IconQrcode,
   IconReport,
   IconScan,
   IconSun,
   IconTicket,
-  IconDevices,
   IconUsersGroup,
 } from '@tabler/icons-react'
 import { useCallback, useEffect, useState } from 'react'
@@ -109,7 +112,7 @@ const Navbar = ({
         .label
       setActive(activeMenu)
       window.history.replaceState({}, document.title)
-      document.title = activeMenu + ' - Admin'
+      document.title = activeMenu + ' - Admin - APAC Tech'
     }
   }, [location?.pathname])
 
@@ -289,6 +292,18 @@ const Navbar = ({
     }
   }
 
+  const renderQRCode = async () => {
+    try {
+      const res = await get(getQRCode+"/"+user?.user?.id)
+      if(res.status){
+        window.open(import.meta.env.VITE_BACKEND_URL.includes('localhost')?`${import.meta.env.VITE_BACKEND_URL}storage/qrcode/qrcode_${user?.user?.id}.svg`:
+        `${import.meta.env.VITE_BACKEND_URL}image/storage/qrcode/qrcode_${user?.user?.id}.svg`, '_blank');
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
   return (
     <>
       <nav
@@ -298,13 +313,12 @@ const Navbar = ({
       >
         <div className={classes.navbarMain}>
           <Group className={classes.header} justify="space-between">
-            {/* <Image
-              src="https://littlepay.com/wp-content/uploads/2021/11/animation-elements-2.svg"
-              w={isCompactMenu ? '120%' : '50%'}
-            ></Image> */}
             <Code fw={700} className={classes.version}>
-              v1.0.1
+              {user.user.name}
             </Code>
+            <Tooltip label="Your QR code" fz={'xs'}>
+              <IconQrcode onClick={()=>renderQRCode()} color='#fff164' width={28} height={28} style={{border: "solid 2px orange", borderRadius: '5px', cursor:'pointer'}}/>
+            </Tooltip>
           </Group>
           {links}
         </div>

FRONTEND/src/components/Navbar/NavbarSimpleColored.module.css

@@ -14,8 +14,8 @@
 
 
 .header {
-  padding: var(--mantine-spacing-md);
-  margin-bottom: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-xs);
+  /* margin-bottom: var(--mantine-spacing-sm); */
   /* border-bottom: rem(1px) solid; */
   /* z-index: 1000; */
   background-image: linear-gradient(rgba(27, 26, 26, 0.5),
@@ -25,6 +25,7 @@
   background-repeat: no-repeat;
   background-size: cover;
   overflow: hidden;
+  align-items: end;
 }
 
 .footer {
@@ -34,7 +35,7 @@
 }
 
 .version {
-  background-color: #576470b7;
+  background-color: #57647091;
   color: var(--mantine-color-white);
   overflow: hidden;
 }