temp 2

src/App.tsx

@@ -1,9 +1,18 @@
 import { createContext } from 'react'
 import RouterSetup from './RouterSetup'
+import { useSelector } from 'react-redux'
+import type { StoreType } from './stores'
+import Loading from './components/Loading'
 
 export default function App() {
+  const userStore = useSelector((store: StoreType) => store.user)
 
   return (
-      <RouterSetup />
+    <>
+      {
+        userStore.loading ? <Loading />
+          : <RouterSetup />
+      }
+    </>
   )
 }

src/components/Loading.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export default function Loading() {
+    return (
+        <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-white/70 backdrop-blur-sm">
+            <div className="relative mb-4">
+                <div className="h-14 w-14 rounded-full bg-gray-200 animate-pulse" />
+                <svg
+                    className="absolute -right-2 -bottom-2 h-7 w-7 animate-spin"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden
+                >
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" className="text-gray-300 opacity-70" />
+                    <path d="M22 12a10 10 0 00-10-10" stroke="currentColor" strokeWidth="3" className="text-indigo-500" strokeLinecap="round" />
+                </svg>
+            </div>
+            <div className="text-gray-600 font-medium">Đang tải dữ liệu xác thực...</div>
+        </div>
+    )
+}

src/pages/admin/auth/ProtectedAdmin.tsx

@@ -99,73 +99,8 @@ export default function ProtectedAdmin(
 
 
     /* chưa vào case, default */
-    return (
-        <div className="w-full max-w-md mx-auto p-6 rounded-2xl bg-white/80 backdrop-blur-sm shadow-lg border border-gray-100">
-            <div className="flex items-center gap-4">
-                {/* avatar skeleton + spinner */}
-                <div className="relative">
-                    <div className="h-14 w-14 rounded-full bg-gray-200 animate-pulse" />
-                    <svg
-                        className="absolute -right-2 -bottom-2 h-7 w-7 animate-spin"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        aria-hidden
-                    >
-                        <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" className="text-gray-300 opacity-70" />
-                        <path d="M22 12a10 10 0 00-10-10" stroke="currentColor" strokeWidth="3" className="text-indigo-500" strokeLinecap="round" />
-                    </svg>
-                </div>
 
 
-                <div className="flex-1">
-                    <div className="h-4 bg-gray-200 rounded-md w-3/4 mb-3 animate-pulse" />
-                    <div className="h-3 bg-gray-200 rounded-md w-1/2 animate-pulse" />
-                </div>
-            </div>
-
-
-            <div className="mt-6 grid grid-cols-3 gap-3">
-                <div className="col-span-2">
-                    <div className="h-10 rounded-lg bg-gradient-to-r from-gray-100 via-gray-200 to-gray-100 animate-shimmer" />
-                </div>
-
-
-                <div className="flex items-center justify-center">
-                    <div className="h-10 w-10 rounded-lg border border-dashed border-gray-200 flex items-center justify-center">
-                        <svg className="h-5 w-5 animate-bounce" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
-                            <path d="M12 2v6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-indigo-500" />
-                            <path d="M12 22v-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-indigo-300" />
-                        </svg>
-                    </div>
-                </div>
-            </div>
-
-
-            <div className="mt-4 text-center text-sm text-gray-500">
-                Đang xác thực — kết nối tới máy chủ...
-            </div>
-
-
-            {/* visually-hidden for screen readers */}
-            <span className="sr-only">Loading authentication information</span>
-
-
-            <style>{`/* tiny shimmer animation without external libraries */
-                @keyframes shimmer {
-                0% { background-position: -250px 0 }
-                100% { background-position: 250px 0 }
-                }
-                .animate-shimmer {
-                background-size: 500px 100%;
-                background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
-                animation: shimmer 1.6s infinite;
-                }
-                `}
-            </style>
-        </div>
-    )
-
     async function signInHandle(e: FormEvent) {
         e.preventDefault()
         let data: UserSignInDTO = {

src/pages/home/auth/Auth.tsx

@@ -49,9 +49,9 @@ export default function Auth() {
         console.log("loginData", loginData)
         try {
             let data = await Apis.user.signIn(loginData)
-            localStorage.setItem("userLogin", data.data.id)
+            localStorage.setItem("token", data)
             Modal.confirm({
-                title: `Chào mừng ${data.data.userName} đã quay trở lại`,
+                title: `Chào mừng bạn đã quay trở lại`,
                 content: ``,
                 onOk: () => {
                     window.location.href = "/"