Feature/implement user interface vi

backend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "evora-backend",
-	"version": "1.4.3",
+	"version": "1.4.4",
 	"description": "Evora connects customers with event organizers quickly through detailed online booking.",
 	"repository": "https://github.com/bakaqc/evora-17c",
 	"author": "Quốc Chương",

backend/src/domains/parties/parties.controller.ts

@@ -29,9 +29,8 @@ export class PartiesController {
 		return await this.partiesService.create(createPartyDto);
 	}
 
-	@Roles(Role.SUPER_ADMIN)
 	@Public()
-	@ApiOperation({ summary: 'Fetch all parties - Super Admin only' })
+	@ApiOperation({ summary: 'Fetch all parties' })
 	@Get()
 	async getAll() {
 		return await this.partiesService.getAll();

backend/src/domains/reviews/reviews.controller.ts

@@ -10,8 +10,6 @@ import {
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 
 import { Public } from '@/domains/auth/decorators/public.decorator';
-import { Roles } from '@/domains/auth/decorators/roles.decorator';
-import { Role } from '@/domains/auth/enums/role.enum';
 import { CreateReviewDto } from '@/domains/reviews/dto/createReview.dto';
 import { UpdateReviewDto } from '@/domains/reviews/dto/updateReview.dto';
 import { ReviewsService } from '@/domains/reviews/reviews.service';
@@ -28,9 +26,8 @@ export class ReviewsController {
 		return await this.reviewsService.create(createReviewDto);
 	}
 
-	@Roles(Role.SUPER_ADMIN)
 	@Public()
-	@ApiOperation({ summary: 'Fetch all reviews - Super Admin only' })
+	@ApiOperation({ summary: 'Fetch all reviews' })
 	@Get()
 	async getAll() {
 		return await this.reviewsService.getAll();

backend/src/domains/users/dto/updateUser.dto.ts

@@ -36,20 +36,4 @@ export class UpdateUserDto {
 
 	@ApiPropertyOptional({ description: 'User avatar' })
 	avatar?: string;
-
-	@ApiPropertyOptional({ description: 'User role' })
-	@ValidateIf((o) => o.role !== undefined)
-	@IsIn(['user', 'admin', 'super-admin'], {
-		message: 'Role must be user, admin or super-admin',
-	})
-	role?: string;
-
-	@ApiPropertyOptional({ description: 'User verification code' })
-	verificationCode?: string;
-
-	@ApiPropertyOptional({ description: 'User verification code expires' })
-	verificationCodeExpires?: Date;
-
-	@ApiPropertyOptional({ description: 'User is verified' })
-	isVerified?: boolean;
 }

frontend/package.json

@@ -15,17 +15,17 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-icon": "1.0.0",
-    "react-icons": "^5.4.0",
-    "react-redux": "^9.2.0",
-    "react-router-dom": "^7.1.0",
-    "slick-carousel": "^1.8.1"
+    "react-icons": "5.4.0",
+    "react-redux": "9.2.0",
+    "react-router-dom": "7.1.0",
+    "slick-carousel": "1.8.1"
   },
   "devDependencies": {
     "@eslint/js": "9.17.0",
     "@types/react": "18.3.17",
     "@types/react-dom": "18.3.5",
     "@vitejs/plugin-react-swc": "3.5.0",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "10.4.20",
     "eslint": "9.17.0",
     "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-react-refresh": "0.4.16",

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import {
 	LoginAdmin,
 	LoginUser,
 	RegisterUser,
+	VerifyOTP,
 } from '@/containers/public';
 import { path } from '@/ultils/constant';
 
@@ -20,6 +21,7 @@ const App: React.FC = () => {
 				<Route path={path.LOGIN_USER} element={<LoginUser />} />
 				<Route path={path.LOGIN_ADMIN} element={<LoginAdmin />} />
 				<Route path={path.REGISTER_USER} element={<RegisterUser />} />
+				<Route path={path.VERIFY_OTP} element={<VerifyOTP />} />
 			</Routes>
 		</div>
 	);

frontend/src/components/index.ts

@@ -1,6 +1,5 @@
 export { default as Button } from './Button';
 export { default as Intro } from './Intro';
-export { default as Contact } from './Contact';
 export { default as List } from './List';
 export { default as Item } from './Item';
 export { default as TopBar } from './TopBar';

frontend/src/containers/public/Home.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 
-import { Banner, Contact, Intro, TopBar } from '@/components';
+import { Banner, Intro, TopBar } from '@/components';
 import { Footer, Navigation } from '@/containers/public';
 
 const Home: React.FC = () => {
@@ -15,10 +15,8 @@ const Home: React.FC = () => {
 					<Outlet />
 				</div>
 				<Intro />
-				<Contact />
 			</div>
 			<Footer />
-			<div className="h-[500px]"></div>
 		</div>
 	);
 };

frontend/src/containers/public/Navigation.tsx

@@ -52,30 +52,12 @@ const Navigation: React.FC<NavigationProps> = ({ isAdmin = false }) => {
 				>
 					ĐÁM CƯỚI
 				</NavLink>
-				<NavLink
-					to={path.EVENT}
-					className={({ isActive }) => (isActive ? active : notActive)}
-				>
-					SỰ KIỆN
-				</NavLink>
-				<NavLink
-					to={path.ORGANIZE}
-					className={({ isActive }) => (isActive ? active : notActive)}
-				>
-					ĐƠN VỊ TỔ CHỨC
-				</NavLink>
 				<NavLink
 					to={path.INTRO}
 					className={({ isActive }) => (isActive ? active : notActive)}
 				>
 					GIỚI THIỆU
 				</NavLink>
-				<NavLink
-					to={path.CONTACT}
-					className={({ isActive }) => (isActive ? active : notActive)}
-				>
-					LIÊN HỆ
-				</NavLink>
 
 				{/* Dropdown Button for Login */}
 				<div className="relative h-full">

frontend/src/containers/public/VerifyOTP.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+import logo1 from '@/assets/logo1.png';
+import { ButtonForLogin, InputField } from '@/components';
+import { path } from '@/ultils/constant';
+
+const VerifyOTP: React.FC = () => {
+	return (
+		<section className="gradient-form h-screen bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center">
+			<div className="container max-w-5xl p-6">
+				<div className="flex flex-wrap items-center justify-center text-neutral-800 dark:text-neutral-200">
+					<div className="w-full">
+						<div className="block rounded-lg bg-white shadow-lg dark:bg-neutral-800">
+							<div className="g-0 lg:flex lg:flex-wrap">
+								{/* Left Column */}
+								<div className="px-6 py-8 md:px-8 lg:w-6/12">
+									<div className="text-center">
+										<img className="mx-auto w-36" src={logo1} alt="logo" />
+										<h4 className="mb-6 mt-4 text-xl font-semibold">
+											Verify Your OTP
+										</h4>
+									</div>
+									<InputField id="otp" label="OTP" type="text" />
+
+									{/* Verify Button */}
+									<div className="mb-6 text-center">
+										<ButtonForLogin label="Verify OTP" />
+										<a
+											href="#!"
+											className="mt-2 inline-block text-sm text-primary"
+										>
+											Resend OTP
+										</a>
+									</div>
+
+									{/* Login Section */}
+									<div className="flex items-center justify-between">
+										<p className="text-sm">Back to Login?</p>
+										<NavLink
+											to={path.LOGIN_USER}
+											className="rounded border border-blue-500 px-4 py-2 text-sm text-blue-500 hover:bg-blue-50"
+										>
+											Log in
+										</NavLink>
+									</div>
+								</div>
+
+								{/* Right Column */}
+								<div className="flex items-center justify-center rounded-b-lg bg-gradient-to-r from-yellow-500 via-orange-500 to-amber-700 lg:w-6/12 lg:rounded-e-lg lg:rounded-bl-none">
+									<div className="px-6 py-8 text-white md:px-8">
+										<h4 className="mb-6 text-xl font-semibold">
+											Secure Your Account
+										</h4>
+										<p className="text-sm">
+											To ensure your account's security, please verify the OTP
+											sent to your email.
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default VerifyOTP;

frontend/src/containers/public/index.ts

@@ -3,6 +3,7 @@ export { default as Footer } from './Footer';
 export { default as LoginUser } from './LoginUser';
 export { default as LoginAdmin } from './LoginAdmin';
 export { default as RegisterUser } from './RegisterUser';
+export { default as VerifyOTP } from './VerifyOTP';
 export { default as Home } from './Home';
 export { default as Navigation } from './Navigation';
 export { default as HomePage } from './HomePage';

frontend/src/main.tsx

@@ -6,9 +6,8 @@ import 'slick-carousel/slick/slick-theme.css';
 import 'slick-carousel/slick/slick.css';
 
 import App from '@/App';
-
-import './index.css';
-import reduxStore from './redux';
+import '@/index.css';
+import reduxStore from '@/redux';
 
 const { store, persistor } = reduxStore();
 createRoot(document.getElementById('root')!).render(

frontend/src/schemas/booking.schema.ts

@@ -1,16 +1,16 @@
-import { User } from '@/schemas/user.schema';
-import { Payment } from '@/schemas/payment.schema';
 import { Party } from '@/schemas/party.schema';
+import { Payment } from '@/schemas/payment.schema';
+import { User } from '@/schemas/user.schema';
 
 export interface Booking {
-  _id: string;
-  user: User;
-  party: Party;
-  guestCount: number;
-  status: 'PENDING' | 'APPROVED' | 'CANCELLED';
-  payment?: Payment;
-  organizeDate: Date;
-  organizeAt: string;
-  createdAt?: Date;
-  updatedAt?: Date;
+	_id: string;
+	user: User;
+	party: Party;
+	guestCount: number;
+	status: 'PENDING' | 'APPROVED' | 'CANCELLED';
+	payment?: Payment;
+	organizeDate: Date;
+	organizeAt: string;
+	createdAt?: Date;
+	updatedAt?: Date;
 }

frontend/src/schemas/notify.schema.ts

@@ -6,5 +6,5 @@ export interface Notify {
 	title: string;
 	message: string;
 	createdAt?: Date;
-  updatedAt?: Date;
+	updatedAt?: Date;
 }

frontend/src/schemas/payment.schema.ts

@@ -1,5 +1,5 @@
-import { Voucher } from '@/schemas/voucher.schema';
 import { Booking } from '@/schemas/booking.schema';
+import { Voucher } from '@/schemas/voucher.schema';
 
 export interface Payment {
 	_id: string;

frontend/src/schemas/review.schema.ts

@@ -1,5 +1,4 @@
-import { Booking } from "@/schemas/booking.schema";
-
+import { Booking } from '@/schemas/booking.schema';
 
 export interface Review {
 	_id: string;

frontend/src/ultils/constant.ts

@@ -11,6 +11,7 @@ export const path = {
 	ORGANIZE: '/don-vi-to-chuc',
 	INTRO: '/gioi-thieu',
 	CONTACT: '/lien-he',
+	VERIFY_OTP: '/otp',
 };
 
 export const text = {