ducdt/hoanghapc_nextJs
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

last day

Browse Source
This commit is contained in:
Dao Duc
2026-03-02 11:57:37 +07:00
parent a7e23cb983
commit 641ac01582
8 changed files with 290 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/components/account/ChangeInfo.tsx Normal file
View File

@@ -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>
);
}

40
src/components/account/ChangePassword.tsx Normal file
View File

@@ -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>
</>
);
}

23
src/components/account/Comment.tsx Normal file
View File

@@ -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>
</>
);
}

40
src/components/account/Order.tsx Normal file
View File

@@ -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 >
</>
);
}

0
src/components/account/OrderDetail.tsx Normal file
View File

23
src/components/account/Review.tsx Normal file
View File

@@ -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>
</>
);
}

55
src/components/account/index.tsx
View File

@@ -1,50 +1,81 @@
'use client'; 'use client';
import Link from "next/link"; import Link from "next/link";
import { CustomerInfo } from "@/data/customers" 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() { 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 ( return (
<div className="account-page"> <div className="account-page">
<div className="container"> <div className="container">
<div className="account-col-left"> <div className="account-col-left">
<div className="box-info"> <div className="box-info">
<p> <p>
Tài khoản của, Tài khoản của,
<b> {CustomerInfo[0]?.name} </b> <b> {customer.name} </b>
</p> </p>
</div> </div>
<div className="box-direction font-500 text-16"> <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" /> <i className="bx bx-user text-20" />
<span>Thông tin tài khoản</span> <span>Thông tin tài khoản</span>
</Link> </Link>
<Link href="/taikhoan?view=order"> <Link href="/taikhoan?view=order"
className={view === 'order' ? 'current' : ''}
>
<i className="bx bx-list-ul-square text-20" /> <i className="bx bx-list-ul-square text-20" />
<span>Danh sách đơn hàng</span> <span>Danh sách đơn hàng</span>
</Link> </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" /> <i className="bxr bx-star text-20" />
<span>Đánh giá của tôi</span> <span>Đánh giá của tôi</span>
</Link> </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" /> <i className="bxr bx-message-dots text-20" />
<span>Bình luận của tôi</span> <span>Bình luận của tôi</span>
</Link> </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" /> <i className="bx bx-lock text-20" />
<span>Thay đổi mật khẩu</span> <span>Thay đổi mật khẩu</span>
</Link> </Link>
<Link href="/san-pham-da-xem"> <Link href="/san-pham-da-xem">
<i className="bx bx-eye text-20" /> <i className="bx bx-eye text-20" />
<span>Sản phẩm đã xem</span> <span>Sản phẩm đã xem</span>
</Link> </Link>
<Link href="/logout.php"> <Link href="/logout.php">
<i className="bx bx-arrow-out-right-square-half text-20" /> <i className="bx bx-arrow-out-right-square-half text-20" />
@@ -54,7 +85,9 @@ export default function AccountPage() {
</div> </div>
<div className="account-col-right"> <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> </div>
</div> </div>

5
src/components/customer/Login.tsx
View File

@@ -38,6 +38,11 @@ export default function LoginPage() {
<Link href="/dang-nhap" className="current">ĐĂNG NHẬP</Link> <Link href="/dang-nhap" className="current">ĐĂNG NHẬP</Link>
</div> </div>
<p className="text-center font-bold red my-4">
Test:
admin@mail.com / 123456
</p>
<div className="customer-form"> <div className="customer-form">
<div className="item"> <div className="item">
<p>Email<span className="red">*</span></p> <p>Email<span className="red">*</span></p>