resolve conflict

app/(main)/login/page.tsx

@@ -1,19 +1,23 @@
 "use client";
 
-import { useState, FormEvent } from "react";
-import { useRouter } from "next/navigation";
-import Image from "next/image";
-import Link from "next/link";
 import { useAuth } from "@/lib/auth-context";
 import { SHOP_INFO } from "@/lib/constants";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { FormEvent, useState } from "react";
 
 export default function LoginPage() {
   const router = useRouter();
   const { login } = useAuth();
-  
+
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
-  const [errors, setErrors] = useState({ username: "", password: "", general: "" });
+  const [errors, setErrors] = useState({
+    username: "",
+    password: "",
+    general: "",
+  });
   const [showPassword, setShowPassword] = useState(false);
 
   const validate = (): boolean => {
@@ -39,28 +43,29 @@ export default function LoginPage() {
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
-    
+
     if (!validate()) return;
 
     const success = login(username, password);
-    
+
     if (success) {
       router.push("/");
     } else {
-      setErrors({ username: "", password: "", general: "Tên đăng nhập hoặc mật khẩu không đúng" });
+      setErrors({
+        username: "",
+        password: "",
+        general: "Tên đăng nhập hoặc mật khẩu không đúng",
+      });
     }
   };
 
   return (
-    <div 
-      className="min-h-screen flex items-center justify-center px-4 py-8 bg-background"
-    >
+    <div className="bg-background flex min-h-screen items-center justify-center px-4 py-8">
       {/* Login Form Card */}
-      <div className="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
-        
+      <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-lg">
         {/* Logo & Shop Name */}
-        <div className="flex flex-col items-center mb-8">
-          <div className="relative w-20 h-20 mb-4">
+        <div className="mb-8 flex flex-col items-center">
+          <div className="relative mb-4 h-20 w-20">
             <Image
               src={SHOP_INFO.logo}
               alt={SHOP_INFO.name}
@@ -70,7 +75,7 @@ export default function LoginPage() {
               priority
             />
           </div>
-          <h1 className="text-2xl font-bold text-(--color-primary-dark) mb-1">
+          <h1 className="mb-1 text-2xl font-bold text-(--color-primary-dark)">
             {SHOP_INFO.name}
           </h1>
           <p className="text-sm text-(--color-text-muted)">
@@ -80,7 +85,7 @@ export default function LoginPage() {
 
         {/* Error Message */}
         {errors.general && (
-          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600 flex items-center gap-2">
+          <div className="mb-4 flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">
             <i className="fa-solid fa-circle-exclamation"></i>
             <span>{errors.general}</span>
           </div>
@@ -88,14 +93,16 @@ export default function LoginPage() {
 
         {/* Login Form */}
         <form onSubmit={handleSubmit} className="space-y-5">
-          
           {/* Username Input */}
           <div>
-            <label htmlFor="username" className="block text-sm font-medium text-(--color-text-secondary) mb-2">
+            <label
+              htmlFor="username"
+              className="mb-2 block text-sm font-medium text-(--color-text-secondary)"
+            >
               Tên đăng nhập
             </label>
             <div className="relative">
-              <i className="fa-solid fa-user absolute left-4 top-1/2 -translate-y-1/2 text-(--color-text-muted) hidden lg:block"></i>
+              <i className="fa-solid fa-user absolute top-1/2 left-4 hidden -translate-y-1/2 text-(--color-text-muted) lg:block"></i>
               <input
                 id="username"
                 type="text"
@@ -105,19 +112,11 @@ export default function LoginPage() {
                   setErrors({ ...errors, username: "", general: "" });
                 }}
                 placeholder="admin / số điện thoại / tên nhân viên"
-                className={`
-                  w-full px-10 lg:pl-11 py-3 rounded-xl border outline-none
-                  bg-white text-foreground
-                  placeholder:text-(--color-text-muted)
-                  focus:border-(--color-primary) focus:ring-2
-                  focus:ring-(--color-primary) focus:ring-opacity-20
-                  transition-all duration-150
-                  ${errors.username ? "border-red-400" : "border-(--color-border)"}
-                `}
+                className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-10 py-3 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) lg:pl-11 ${errors.username ? "border-red-400" : "border-(--color-border)"} `}
               />
             </div>
             {errors.username && (
-              <p className="mt-1.5 text-xs text-red-500 flex items-center gap-1">
+              <p className="mt-1.5 flex items-center gap-1 text-xs text-red-500">
                 <i className="fa-solid fa-circle-exclamation"></i>
                 {errors.username}
               </p>
@@ -126,11 +125,14 @@ export default function LoginPage() {
 
           {/* Password Input */}
           <div>
-            <label htmlFor="password" className="block text-sm font-medium text-(--color-text-secondary) mb-2">
+            <label
+              htmlFor="password"
+              className="mb-2 block text-sm font-medium text-(--color-text-secondary)"
+            >
               Mật khẩu
             </label>
             <div className="relative">
-              <i className="fa-solid fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-(--color-text-muted) hidden lg:block"></i>
+              <i className="fa-solid fa-lock absolute top-1/2 left-4 hidden -translate-y-1/2 text-(--color-text-muted) lg:block"></i>
               <input
                 id="password"
                 type={showPassword ? "text" : "password"}
@@ -140,27 +142,21 @@ export default function LoginPage() {
                   setErrors({ ...errors, password: "", general: "" });
                 }}
                 placeholder="Nhập mật khẩu"
-                className={`
-                  w-full px-10 lg:pl-11 pr-11 py-3 rounded-xl border outline-none
-                  bg-white text-foreground
-                  placeholder:text-(--color-text-muted)
-                  focus:border-(--color-primary) focus:ring-2
-                  focus:ring-(--color-primary) focus:ring-opacity-20
-                  transition-all duration-150
-                  ${errors.password ? "border-red-400" : "border-(--color-border)"}
-                `}
+                className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-10 py-3 pr-11 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) lg:pl-11 ${errors.password ? "border-red-400" : "border-(--color-border)"} `}
               />
               <button
                 type="button"
                 onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-4 top-1/2 -translate-y-1/2 text-(--color-text-muted) hover:text-(--color-primary) transition-colors"
+                className="absolute top-1/2 right-4 -translate-y-1/2 text-(--color-text-muted) transition-colors hover:text-(--color-primary)"
                 aria-label={showPassword ? "Ẩn mật khẩu" : "Hiện mật khẩu"}
               >
-                <i className={`fa-solid ${showPassword ? "fa-eye-slash" : "fa-eye"}`}></i>
+                <i
+                  className={`fa-solid ${showPassword ? "fa-eye-slash" : "fa-eye"}`}
+                ></i>
               </button>
             </div>
             {errors.password && (
-              <p className="mt-1.5 text-xs text-red-500 flex items-center gap-1">
+              <p className="mt-1.5 flex items-center gap-1 text-xs text-red-500">
                 <i className="fa-solid fa-circle-exclamation"></i>
                 {errors.password}
               </p>
@@ -172,10 +168,7 @@ export default function LoginPage() {
             {/* Login Button */}
             <button
               type="submit"
-              className="w-full py-3 rounded-xl font-semibold text-white
-                         bg-(--color-primary) hover:bg-(--color-primary-dark)
-                         active:scale-98 transition-all duration-150
-                         border-none cursor-pointer"
+              className="w-full cursor-pointer rounded-xl border-none bg-(--color-primary) py-3 font-semibold text-white transition-all duration-150 hover:bg-(--color-primary-dark) active:scale-98"
             >
               Đăng nhập
             </button>
@@ -183,12 +176,7 @@ export default function LoginPage() {
             {/* Register Button */}
             <Link
               href="/register"
-              className="w-full py-3 rounded-xl font-semibold
-                         bg-white text-(--color-primary)
-                         border-2 border-(--color-primary)
-                         hover:bg-(--color-primary) hover:text-white
-                         active:scale-98 transition-all duration-150
-                         flex items-center justify-center no-underline"
+              className="flex w-full items-center justify-center rounded-xl border-2 border-(--color-primary) bg-white py-3 font-semibold text-(--color-primary) no-underline transition-all duration-150 hover:bg-(--color-primary) hover:text-white active:scale-98"
             >
               Đăng ký tài khoản
             </Link>
@@ -196,12 +184,29 @@ export default function LoginPage() {
         </form>
 
         {/* Demo Credentials Info */}
-        <div className="mt-6 p-4 bg-background rounded-lg">
-          <p className="text-xs text-(--color-text-muted) mb-2 font-semibold">Tài khoản demo:</p>
-          <ul className="text-xs text-(--color-text-muted) space-y-1">
-            <li>• Quản lý: <code className="bg-white px-1.5 py-0.5 rounded">admin / admin</code></li>
-            <li>• Nhân viên: <code className="bg-white px-1.5 py-0.5 rounded">Nguyễn Văn An / Nguyễn Văn An</code></li>
-            <li>• Khách hàng: <code className="bg-white px-1.5 py-0.5 rounded">0987654321 / user1</code></li>
+        <div className="bg-background mt-6 rounded-lg p-4">
+          <p className="mb-2 text-xs font-semibold text-(--color-text-muted)">
+            Tài khoản demo:
+          </p>
+          <ul className="space-y-1 text-xs text-(--color-text-muted)">
+            <li>
+              • Quản lý:{" "}
+              <code className="rounded bg-white px-1.5 py-0.5">
+                admin / admin
+              </code>
+            </li>
+            <li>
+              • Nhân viên:{" "}
+              <code className="rounded bg-white px-1.5 py-0.5">
+                Nguyễn Văn An / Nguyễn Văn An
+              </code>
+            </li>
+            <li>
+              • Khách hàng:{" "}
+              <code className="rounded bg-white px-1.5 py-0.5">
+                0987654321 / user1
+              </code>
+            </li>
           </ul>
         </div>
       </div>