From 641ac015828e7d86ee3784ceeafb0473f17bfbe4 Mon Sep 17 00:00:00 2001
From: Dao Duc <ducdt@hurasoft.com>
Date: Mon, 2 Mar 2026 11:57:37 +0700
Subject: [PATCH] last day

---
 src/components/account/ChangeInfo.tsx     | 115 ++++++++++++++++++++++
 src/components/account/ChangePassword.tsx |  40 ++++++++
 src/components/account/Comment.tsx        |  23 +++++
 src/components/account/Order.tsx          |  40 ++++++++
 src/components/account/OrderDetail.tsx    |   0
 src/components/account/Review.tsx         |  23 +++++
 src/components/account/index.tsx          |  55 ++++++++---
 src/components/customer/Login.tsx         |   5 +
 8 files changed, 290 insertions(+), 11 deletions(-)
 create mode 100644 src/components/account/ChangeInfo.tsx
 create mode 100644 src/components/account/ChangePassword.tsx
 create mode 100644 src/components/account/Comment.tsx
 create mode 100644 src/components/account/Order.tsx
 create mode 100644 src/components/account/OrderDetail.tsx
 create mode 100644 src/components/account/Review.tsx

diff --git a/src/components/account/ChangeInfo.tsx b/src/components/account/ChangeInfo.tsx
new file mode 100644
index 0000000..b42f4d8
--- /dev/null
+++ b/src/components/account/ChangeInfo.tsx
@@ -0,0 +1,115 @@
+export default function ChangeInfo({ customer }: any) {    
+    return (
+        <div className="change-info">
+            <h3 className="title">Thông tin tài khoản</h3>
+            <form method="post" encType="multipart/form-data" name="account_form" className="col-right-tbl" id="js-customer-info">
+                <table cellPadding={5} border={0} style={{
+                    borderCollapse: 'collapse',
+                    width: '100%',
+                    borderColor: '#CCCCCC'
+                }}>
+                    <tbody>
+                        <tr>
+                            <td>Họ tên</td>
+                            <td>
+                                <input 
+                                    type="text" 
+                                    className="form-control" 
+                                    name="fullname" 
+                                    size={40} 
+                                    defaultValue={customer?.name}
+                                />
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td>Giới tính</td>
+                            <td>
+                                <label className="inline-flex items-center gap-1 mr-3 cursor-pointer">
+                                    <input type="radio" name="sex" defaultValue="male" defaultChecked />
+                                    <span> Nam </span>
+                                </label>
+                                <label className="inline-flex items-center gap-1 cursor-pointer">
+                                    <input type="radio" name="sex" defaultValue="female" />
+                                    <span> Nữ </span>
+                                </label>
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td>Địa chỉ email</td>
+                            <td>
+                                <input 
+                                    type="text" 
+                                    className="form-control" 
+                                    name="email" 
+                                    size={40} 
+                                    value={customer?.email}
+                                    readOnly
+                                />
+
+                                <input 
+                                    type="hidden" 
+                                    name="old_email" 
+                                    id="old_email" 
+                                    defaultValue="ducdt@hurasoft.com" 
+                                />
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td>Địa chỉ nhà</td>
+                            <td>
+                                <input 
+                                    type="text" 
+                                    className="form-control" 
+                                    name="address" 
+                                    id="address" 
+                                    defaultValue={customer?.address || ""} 
+                                    size={50} 
+                                />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Tỉnh / TP</td>
+                            <td>
+                                <select 
+                                    className="form-control" 
+                                    name="province"
+                                    defaultValue="Hà Nội"
+                                >
+                                    <option value="Hà Nội">Hà Nội</option><option value="TP HCM">TP HCM</option><option value="Hải Phòng">Hải Phòng</option><option value="Đà Nẵng">Đà Nẵng</option><option value="An Giang">An Giang</option><option value="Bà Rịa-Vũng Tàu">Bà Rịa-Vũng Tàu</option><option value="Bình Dương">Bình Dương</option><option value="Bình Phước">Bình Phước</option><option value="Bình Thuận">Bình Thuận</option><option value="Bình Định">Bình Định</option><option value="Bạc Liêu">Bạc Liêu</option><option value="Bắc Giang">Bắc Giang</option><option value="Bắc Kạn">Bắc Kạn</option><option value="Bắc Ninh">Bắc Ninh</option><option value="Bến Tre">Bến Tre</option><option value="Cao Bằng">Cao Bằng</option><option value="Cà Mau">Cà Mau</option><option value="Cần Thơ">Cần Thơ</option><option value="Gia Lai">Gia Lai</option><option value="Hà Giang">Hà Giang</option><option value="Hà Nam">Hà Nam</option><option value="Hà Tĩnh">Hà Tĩnh</option><option value="Hòa Bình">Hòa Bình</option><option value="Hải Dương">Hải Dương</option><option value="Hậu Giang">Hậu Giang</option><option value="Hưng Yên">Hưng Yên</option><option value="Khánh Hòa">Khánh Hòa</option><option value="Kiên Giang">Kiên Giang</option><option value="Kon Tum">Kon Tum</option><option value="Lai Châu">Lai Châu</option><option value="Lào Cai">Lào Cai</option><option value="Lâm Đồng">Lâm Đồng</option><option value="Lạng Sơn">Lạng Sơn</option><option value="Long An">Long An</option><option value="Nam Định">Nam Định</option><option value="Nghệ An">Nghệ An</option><option value="Ninh Bình">Ninh Bình</option><option value="Ninh Thuận">Ninh Thuận</option><option value="Phú Thọ">Phú Thọ</option><option value="Phú Yên">Phú Yên</option><option value="Quảng Bình">Quảng Bình</option><option value="Quảng Nam">Quảng Nam</option><option value="Quảng Ngãi">Quảng Ngãi</option><option value="Quảng Ninh">Quảng Ninh</option><option value="Quảng Trị">Quảng Trị</option><option value="Sóc Trăng">Sóc Trăng</option><option value="Sơn La">Sơn La</option><option value="Tây Ninh">Tây Ninh</option><option value="Thanh Hóa">Thanh Hóa</option><option value="Thái Bình">Thái Bình</option><option value="Thái Nguyên">Thái Nguyên</option><option value="Thừa Thiên-Huế">Thừa Thiên-Huế</option><option value="Tiền Giang">Tiền Giang</option><option value="Trà Vinh">Trà Vinh</option><option value="Tuyên Quang">Tuyên Quang</option><option value="Vĩnh Long">Vĩnh Long</option><option value="Vĩnh Phúc">Vĩnh Phúc</option><option value="Yên Bái">Yên Bái</option><option value="Đắk Lắk">Đắk Lắk</option><option value="Đồng Nai">Đồng Nai</option><option value="Đồng Tháp">Đồng Tháp</option><option value="Điện Biên">Điện Biên</option><option value="Đăk Nông">Đăk Nông</option>
+                                </select>
+                            </td>
+                        </tr>
+                        
+                        <tr>
+                            <td>Điện thoại di động</td>
+                            <td>
+                                <input 
+                                    type="text" 
+                                    className="form-control" 
+                                    name="mobile" 
+                                    defaultValue={customer?.mobile || ""}
+                                />
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td />
+                            <td>
+                                <button 
+                                    type="button" 
+                                    className="btn btn-danger uppercase"> 
+                                    Thay đổi 
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+                <input type="hidden" name="update" defaultValue="yes" />
+            </form>
+
+        </div>
+    );
+}   
\ No newline at end of file
diff --git a/src/components/account/ChangePassword.tsx b/src/components/account/ChangePassword.tsx
new file mode 100644
index 0000000..7877501
--- /dev/null
+++ b/src/components/account/ChangePassword.tsx
@@ -0,0 +1,40 @@
+export default function ChangePassword() {
+    return (
+        <>
+            <h3 className="title">Thay đổi mật khẩu</h3>
+
+            <form method="post" encType="multipart/form-data" name="account_form" className="col-right-tbl">
+                <table cellPadding={5} border={0} style={{ borderCollapse: 'collapse' }}>
+                    <tbody>
+                        <tr>
+                            <td width="150px">Mật khẩu hiện tại</td>
+                            <td>
+                                <input type="password" name="currentpassword" id="currentpassword" className="form-control" />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Mật khẩu mới</td>
+                            <td>
+                                <input type="password" name="newpassword" id="newpassword" className="form-control" />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Nhập lại mật khẩu</td>
+                            <td>
+                                <input type="password" name="renewpassword" id="renewpassword" className="form-control" />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td />
+                            <td>
+                                <input type="submit" defaultValue="Thay đổi" className="btn btn-danger" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+                <input type="hidden" name="update" defaultValue="yes" />
+            </form>
+
+        </>
+    );
+}   
\ No newline at end of file
diff --git a/src/components/account/Comment.tsx b/src/components/account/Comment.tsx
new file mode 100644
index 0000000..e44dd26
--- /dev/null
+++ b/src/components/account/Comment.tsx
@@ -0,0 +1,23 @@
+export default function Comment({ customer } : any) {
+    return (
+        <>
+            <h3 className="title">Bình luận sản phẩm</h3>
+            
+            <div className="account-review-page">
+                <div className="item">
+                    <div className="item-text">
+                        <a href="/link/product.php?id=6434" className="item-name"> HuraSoft - Sản phẩm test (Không xóa) </a>
+                        <time className="item-time"> 21/10/2025 </time>
+                        <p className="item-rate">
+                            <i className="star star-4" />
+                            <span style={{ color: '#f51f42' }}>Chưa duyệt</span>
+                            <span style={{ color: '#1BB51B' }}>Đã duyệt</span>
+                        </p>
+                        <div className="item-content">account test comment</div>
+                    </div>
+                </div>
+                <div className="account-paging"></div>
+            </div>
+        </>
+    );
+}   
\ No newline at end of file
diff --git a/src/components/account/Order.tsx b/src/components/account/Order.tsx
new file mode 100644
index 0000000..23e607b
--- /dev/null
+++ b/src/components/account/Order.tsx
@@ -0,0 +1,40 @@
+export default function Order() {
+    return (
+        <>
+            <h3 className="title">Danh sách đơn hàng</h3>
+            <div style={{ overflow: 'auto' }} className="account-order">
+                <table width="100%" border={1} style={{ borderCollapse: 'collapse' }} cellPadding={4} cellSpacing={0}>
+                    <tbody>
+                        <tr className="text-center" style={{ fontWeight: 'bold', background: '#0066c1', color: '#fff' }}>
+                            <td>STT</td>
+                            <td>Số đơn hàng</td>
+                            <td>Giá trị</td>
+                            <td>Thời gian</td>
+                            <td>Thông tin</td>
+                        </tr>
+
+                        <tr className="text-center">
+                            <td>1</td>
+                            
+                            <td>
+                                #12236 
+                                <a href="?view=order-detail&id=12236" className="table blue font-500 m-auto">Xem chi tiết</a>
+                            </td>
+
+                            <td className="red font-600">
+                                1.990.000
+                            </td>
+
+                            <td>22-10-2025</td>
+
+                            <td>
+                                <span>Đang xử lý</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div >
+
+        </>
+    );
+}   
\ No newline at end of file
diff --git a/src/components/account/OrderDetail.tsx b/src/components/account/OrderDetail.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/account/Review.tsx b/src/components/account/Review.tsx
new file mode 100644
index 0000000..ffaff74
--- /dev/null
+++ b/src/components/account/Review.tsx
@@ -0,0 +1,23 @@
+export default function Review() {
+    return (
+        <>
+            <h3 className="title">Đánh giá sản phẩm</h3>
+            <div className="account-review-page">
+                <div className="item">
+                    <div className="item-text">
+                        <a href="/link/product.php?id=6434" className="item-name"> HuraSoft - Sản phẩm test (Không xóa) </a>
+                        <time className="item-time"> 21/10/2025 </time>
+                        <p className="item-rate">
+                            <i className="star star-4" />
+                            <span style={{ color: '#f51f42' }}>Chưa duyệt</span>
+                            <span style={{ color: '#1BB51B' }}>Đã duyệt</span>
+                        </p>
+                        <div className="item-content">account test comment</div>
+                    </div>
+                </div>
+                <div className="account-paging"></div>
+            </div>
+
+        </>
+    );
+}   
\ No newline at end of file
diff --git a/src/components/account/index.tsx b/src/components/account/index.tsx
index dd97bbf..f427abe 100644
--- a/src/components/account/index.tsx
+++ b/src/components/account/index.tsx
@@ -1,50 +1,81 @@
 'use client';
 import Link from "next/link";
 import { CustomerInfo } from "@/data/customers"
+import { useSearchParams } from 'next/navigation';
+import ChangeInfo from "./ChangeInfo";
+import Order from "./Order";
+import ChangePass from "./ChangePassword";
+import Review from "./Review";
+import Comment from "./Comment";
+
 
 export default function AccountPage() {
+    const searchParams = useSearchParams();
+    const view = searchParams.get('view');
+    const customer = CustomerInfo[0];
+
+    const viewComponent: any = {
+        "change-info": ChangeInfo,
+        "order": Order,
+        "product-review": Review,
+        "product-comment": Comment,
+        "change-pass": ChangePass,
+    };
+    const ActiveComponent = viewComponent[view || "change-info"];
+
+    console.log(customer)
 
     return (
         <div className="account-page">
             <div className="container">
                 <div className="account-col-left">
                     <div className="box-info">
-                        <p> 
-                            Tài khoản của, 
-                            <b> {CustomerInfo[0]?.name} </b> 
+                        <p>
+                            Tài khoản của,
+                            <b> {customer.name} </b>
                         </p>
                     </div>
 
                     <div className="box-direction font-500 text-16">
-                        <Link href="/taikhoan?view=change-info">
+                        <Link href="/taikhoan?view=change-info"
+                            className={view === 'change-info' ? 'current' : ''}
+                        >
                             <i className="bx bx-user text-20" />
                             <span>Thông tin tài khoản</span>
                         </Link>
 
-                        <Link href="/taikhoan?view=order">
+                        <Link href="/taikhoan?view=order"
+                            className={view === 'order' ? 'current' : ''}
+                        >
                             <i className="bx bx-list-ul-square text-20" />
                             <span>Danh sách đơn hàng</span>
                         </Link>
 
-                        <Link href="/taikhoan?view=product-review">
+                        <Link href="/taikhoan?view=product-review"
+                            className={view === 'product-review' ? 'current' : ''}
+                        >
                             <i className="bxr bx-star text-20" />
                             <span>Đánh giá của tôi</span>
                         </Link>
 
-                        <Link href="/taikhoan?view=product-comment">
+                        <Link href="/taikhoan?view=product-comment"
+                            className={view === 'product-comment' ? 'current' : ''}
+                        >
                             <i className="bxr bx-message-dots text-20" />
                             <span>Bình luận của tôi</span>
                         </Link>
 
-                        <Link href="/taikhoan?view=change-pass">
+                        <Link href="/taikhoan?view=change-pass"
+                            className={view === 'change-pass' ? 'current' : ''}
+                        >
                             <i className="bx bx-lock text-20" />
                             <span>Thay đổi mật khẩu</span>
                         </Link>
-                        
+
                         <Link href="/san-pham-da-xem">
                             <i className="bx bx-eye text-20" />
                             <span>Sản phẩm đã xem</span>
-                        </Link>                        
+                        </Link>
 
                         <Link href="/logout.php">
                             <i className="bx bx-arrow-out-right-square-half text-20" />
@@ -54,7 +85,9 @@ export default function AccountPage() {
                 </div>
 
                 <div className="account-col-right">
-                    <p> Bạn đang ở trang tài khoản. Vui lòng chọn các mục bên trái để xem thông tin. </p>
+                    {ActiveComponent && 
+                        <ActiveComponent customer={customer} 
+                    />}
                 </div>
             </div>
         </div>
diff --git a/src/components/customer/Login.tsx b/src/components/customer/Login.tsx
index 954a1c6..6996d47 100644
--- a/src/components/customer/Login.tsx
+++ b/src/components/customer/Login.tsx
@@ -38,6 +38,11 @@ export default function LoginPage() {
                     <Link href="/dang-nhap" className="current">ĐĂNG NHẬP</Link>
                 </div>
 
+                <p className="text-center font-bold red my-4">
+                    Test:
+                    admin@mail.com / 123456
+                </p>
+
                 <div className="customer-form">
                     <div className="item">
                         <p>Email<span className="red">*</span></p>