Update: reformating frontend

frontend/.gitignore

@@ -24,4 +24,5 @@ yarn-error.log*
 
 .env
 note_dev.txt
-object.json
+object.json
+.json

frontend/src/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import './styles/index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './styles/index.css';
+import './styles/styles.css';
 import ErrorPage from './pages/ErrorPage';
 import HomePage from './pages/HomePage';
 import reportWebVitals from './reportWebVitals';
@@ -13,48 +14,91 @@ import MenuPage from './pages/MenuPage';
 import CartPage from './pages/CartPage';
 import UserInfoPage from './pages/UserInfoPage';
 
+import AdminSummaryPage from './pages/AdminSummaryPage';
+import AdminFeedPage from './pages/AdminFeedPage';
+import AdminMenuPage from './pages/AdminMenuPage';
+import AdminStaffPage from './pages/AdminStaffPage';
+import AdminOrderPage from './pages/AdminOrderPage';
+import AdminSchedulePage from './pages/AdminSchedulePage';
+
 const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <HomePage />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "/login",
-    element: <LoginPage />,
-    errorElement: <ErrorPage />
-  },
-  {
-    path: "/register",
-    element: <RegisterPage/>,
-    errorElement: <ErrorPage/>
-  },
-  {
-    path: "/news",
-    element: <NewsPage/>,
-    errorElement: <ErrorPage/>
-  },
-  {
-    path: "/menu",
-    element: <MenuPage/>
-  },
-  {
-    path: "/cart",
-    element: <CartPage/>,
-    errorElement: <ErrorPage/>
-  },
-  {
-    path: "/userinfo",
-    element: <UserInfoPage/>,
-    errorElement: <ErrorPage/>
-  }
+    {
+        path: "/",
+        element: <HomePage />,
+        errorElement: <ErrorPage />,
+    },
+    {
+        path: "/login",
+        element: <LoginPage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path: "/register",
+        element: <RegisterPage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path: "/news",
+        element: <NewsPage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path: "/menu",
+        element: <MenuPage />
+    },
+    {
+        path: "/cart",
+        element: <CartPage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path: "/userinfo",
+        element: <UserInfoPage />,
+        errorElement: <ErrorPage />
+    },
+
+    {
+        path: "/admin",
+        element: <AdminSummaryPage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path: "/admin-summary",
+        element: <AdminSummaryPage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path: "/admin-feed",
+        element: <AdminFeedPage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path: "/admin-schedule",
+        element: <AdminSchedulePage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path: "/admin-menu",
+        element: <AdminMenuPage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path: "/admin-staff",
+        element: <AdminStaffPage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path: "/admin-orders",
+        element: <AdminOrderPage />,
+        errorElement: <ErrorPage />
+    }
 ]);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <RouterProvider router={router}/>
-  </React.StrictMode>
+    <React.StrictMode>
+        <RouterProvider router={router} />
+    </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

frontend/src/molecules/AboutUsSection.js

@@ -1,21 +1,46 @@
 import { Container, Row, Col } from "react-bootstrap";
 
-export default function AboutUsSection () {
+export default function AboutUsSection() {
     return (<>
-    <Container id="about-us" className="my-5">
-        <h1 className="my-4 text-cen">CATS Shop
-        <small> - We code for fun </small>
-        </h1>
+        <Container id="about-us" className="mb-5" style={{
+            maxWidth: "100%",
+            backgroundImage: "linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('/about-us.jpg')", // Thay đường dẫn ảnh nền
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundAttachment: 'fixed',
+            width: '100%',
+            padding: '50px 0',
+        }}>
+            <div className="d-flex justify-content-center align-items-center" style={{
+                maxWidth: "90%",
+                minHeight: "50vh"
+            }} >
 
-        <Row className="align-items-center">
-            <Col md={8}>
-            <img className="img-fluid" src="/cats-logo.png" alt="" style={{width: "100%", height: "auto"}}></img>
-            </Col>
+                <Row className="align-items-center">
+                    {/* <Col md={6}>
+                        <img className="img-fluid" src="/cats-logo.png" alt="" style={{ width: "100%", height: "auto" }}></img>
+                    </Col> */}
+                    <Col md={3}></Col>
+                    <Col md={6} className="align-items-center">
+                        <h1 style={{
+                            fontWeight: 'bold',
+                            // fontFamily: 'Arial, sans-serif', /* Chọn font chữ */
+                            'fontSize': '72px', /* Kích thước chữ cho h1 */
+                        }}
+                            className='mb-3'>CATS Shop
+                        </h1>
+                        <br />
+                        <p style={{
+                            // fontFamily: 'Arial, sans-serif', /* Chọn font chữ */
+                            'fontSize': '36px', /* Kích thước chữ cho h1 */
+                        }}>
+                            Chào mừng mọi người đến với Cats Shop, phương châm của chúng tôi là code at the sink and sleep at the sea.
+                        </p>
+                    </Col>
+                    <Col md={3}></Col>
+                </Row>
+            </div>
 
-            <Col md={4} className="d-flex justify-content-center align-items-center">
-            Chào mừng mọi người đến với Cats Shop, phương châm của chúng tôi là code at the sink and sleep at the sea.
-            </Col>
-        </Row>
-    </Container>
+        </Container>
     </>)
 }

frontend/src/molecules/AdminNavBar.js

@@ -0,0 +1,65 @@
+import {Container, Nav, Navbar, Button, Stack} from 'react-bootstrap'
+import { useNavigate } from 'react-router-dom';
+import DataStorage from '../organisms/DataStorage';
+
+export default function AdminNavbar() {
+
+    const navigate = useNavigate();
+
+    function handleLogout() {
+        DataStorage.set('isLoggedInAdmin','false');
+        DataStorage.remove('accessTokenAdmin');
+        DataStorage.remove('roleAdmin');
+        DataStorage.remove('usernameAdmin');
+        DataStorage.remove('expiryDateAdmin');
+        navigate('/');
+    }
+
+    let username = DataStorage.get('usernameAdmin');
+    let isLoggedIn = DataStorage.get('isLoggedInAdmin');
+
+    let userContent;
+    if (isLoggedIn === 'true') {
+        userContent = <>
+            <Stack direction='horizontal' gap={2}>
+                <Button href="/userinfo" variant='primary'>
+                    Xin chào, ADMIN {username}
+                </Button>
+                <Button onClick={handleLogout} variant='outline-primary'>
+                    Đăng xuất
+                </Button>
+            </Stack>
+        </>
+    } else {
+        userContent = <></>
+    }
+    return (
+        <Navbar id="home" expand="lg" className="bg-body-tertiary" sticky='top' >
+            <Container>
+                <Navbar.Brand href="/admin">
+                    <img
+                        alt=""
+                        src="/cats-logo.png"
+                        width="30"
+                        height="30"
+                        className="d-inline-block align-top"
+                    />{' '}
+                    CATS-Shop
+                </Navbar.Brand>
+                <Navbar.Toggle aria-controls="basic-navbar-nav" />
+                <Navbar.Collapse id="basic-navbar-nav">
+                    <Nav className="me-auto text-center">
+                        {/* These are the navigators */}
+                        <Nav.Link href="/admin-summary">Dashboard</Nav.Link>
+                        <Nav.Link href="/admin-feed">Quản lý bài đăng</Nav.Link>
+                        <Nav.Link href="/admin-menu">Quản lý thực đơn</Nav.Link>
+                        <Nav.Link href="/admin-staff">Quản lý nhân viên</Nav.Link>
+                        <Nav.Link href="/admin-schedule">Lịch làm việc</Nav.Link>
+                        <Nav.Link href="/admin-orders">Danh sách đơn hàng</Nav.Link>
+                    </Nav>
+                    {userContent}
+                </Navbar.Collapse>
+            </Container>
+        </Navbar>
+    )
+}

frontend/src/molecules/ContactSection.js

@@ -2,10 +2,11 @@ import { Container, Row, Col } from "react-bootstrap";
 
 export default function ContactSection() {
     return (
-            <Container id="contact" className="my-5 align-items-center">
+            <Container fluid id="contact" className="my-5 align-items-center">
                 <h1 className="text-center mb-5">Thông tin liên hệ</h1>
-                <Row md={3}>
+                <Row>
                     {/* Cột 1: Số điện thoại liên hệ */}
+                    <Col md={2}></Col>
                     <Col>
                         <h5>Liên hệ</h5>
                         <p>Số điện thoại: 0123-456-789</p>
@@ -26,6 +27,7 @@ export default function ContactSection() {
                             </a>
                         </p>
                     </Col>
+                    <Col md={1}></Col>
                 </Row>
             </Container>
     );

frontend/src/molecules/Navbar.js

@@ -49,8 +49,8 @@ export default function ANavbar() {
     }
 
     return (
-        <Navbar id="home" expand="lg" className="bg-body-tertiary" sticky='top' >
-            <Container>
+        <Navbar id="home" expand="lg" className="bg-body-tertiary" sticky='top' style={{'min-height':'6vh'}}>
+            <Container fluid style={{maxWidth:"90%"}}>
                 <Navbar.Brand href="/">
                     <img
                         alt=""

frontend/src/organisms/MenuSection.js

@@ -18,7 +18,7 @@ function MenuSection() {
   const countCarouselSlides = 4;
 
   return (
-    <Container id="menu" className="text-center justify-content-center align-items-center my-5">
+    <Container fluid id="menu" className="text-center justify-content-center align-items-center my-5" style={{maxWidth:"90%"}}>
       <h1 className='mb-5'>Menu</h1>
       <Carousel activeIndex={index} onSelect={handleSelect} data-bs-theme="dark">
         {Array.from({ length: countCarouselSlides }).map((_, slideIndex) => (

frontend/src/organisms/NewsSection.js

@@ -10,7 +10,7 @@ function NewsSection() {
     ];
    
     return (
-        <Container id="news" className="text-center justify-content-center align-items-center my-5">
+        <Container fluid id="news" className="text-center justify-content-center align-items-center my-5" style={{maxWidth:"90%"}}>
             <h1 className='mb-5'>Tin tức</h1>
             <Row xs={1} md={2} xl={3} className="g-4">
                 {Array.from(newsFeeds).map((feed, idx) => (

frontend/src/organisms/StoreSection.js

@@ -10,7 +10,7 @@ function StoreSection() {
     ];
 
     return (
-        <Container id="store" className="text-center justify-content-center align-items-center my-5">
+        <Container fluid id="store" className="text-center justify-content-center align-items-center my-5" style={{maxWidth:"90%"}}>
             <h1 className='mb-5'>Các chi nhánh</h1>
             <Row className="align-items-center">
                 <Col xs={12} md={4} className="d-flex justify-content-center align-items-center">
@@ -18,7 +18,7 @@ function StoreSection() {
                 </Col>
 
                 <Col xs={12} md={8}>
-                    <Container>
+                    <Container fluid>
                         <Row xs={1} md={2} xl={3} className="g-4">
                             {Array.from(stores).map((store, idx) => (
                                 <Col key={idx}>

frontend/src/pages/AdminFeedPage.js

@@ -0,0 +1,21 @@
+import { Container, Row, Col } from "react-bootstrap";
+import AdminTemplate from "../templates/AdminTemplate";
+
+export default function AdminFeedPage() {
+    return (
+        <AdminTemplate content={
+            (
+                <Container className='d-flex text-center align-items-center justify-content-center' style={{ 'min-height': '80vh' }}>
+                    <Row>
+                        <Col xs={12}>
+                            <h1>This is a demo feed page</h1>
+                        </Col>
+                        <Col xs={12}>
+                            <h3>In the future, we hope to view list of feed, add, edit or remove feeds.</h3>
+                        </Col>
+                    </Row>
+                </Container>
+            )
+        } />
+    );
+}

frontend/src/pages/AdminMenuPage.js

@@ -0,0 +1,21 @@
+import { Container, Row, Col } from "react-bootstrap";
+import AdminTemplate from "../templates/AdminTemplate";
+
+export default function AdminMenuPage() {
+    return (
+        <AdminTemplate content={
+            (
+                <Container className='d-flex text-center align-items-center justify-content-center' style={{ 'min-height': '80vh' }}>
+                    <Row>
+                        <Col xs={12}>
+                            <h1>This is a demo menu page</h1>
+                        </Col>
+                        <Col xs={12}>
+                            <h3>In the future, the menu should be retrieve from master-list, and branch admins can decide which item is available at this branch</h3>
+                        </Col>
+                    </Row>
+                </Container>
+            )
+        } />
+    );
+}

frontend/src/pages/AdminOrderPage.js

@@ -0,0 +1,21 @@
+import { Container, Row, Col } from "react-bootstrap";
+import AdminTemplate from "../templates/AdminTemplate";
+
+export default function AdminOrderPage() {
+    return (
+        <AdminTemplate content={
+            (
+                <Container className='d-flex text-center align-items-center justify-content-center' style={{ 'min-height': '80vh' }}>
+                    <Row>
+                        <Col xs={12}>
+                            <h1>This is a demo orders page</h1>
+                        </Col>
+                        <Col xs={12}>
+                            <h3>In the future, we hope to view orders daily/monthly on this page, with search and filters</h3>
+                        </Col>
+                    </Row>
+                </Container>
+            )
+        } />
+    );
+}

frontend/src/pages/AdminSchedulePage.js

@@ -0,0 +1,21 @@
+import { Container, Row, Col } from "react-bootstrap";
+import AdminTemplate from "../templates/AdminTemplate";
+
+export default function AdminSchedulePage() {
+    return (
+        <AdminTemplate content={
+            (
+                <Container className='d-flex text-center align-items-center justify-content-center' style={{ 'min-height': '80vh' }}>
+                    <Row>
+                        <Col xs={12}>
+                            <h1>This is a demo schedule page</h1>
+                        </Col>
+                        <Col xs={12}>
+                            <h3>In the future, we will view monthly work schedules from this page</h3>
+                        </Col>
+                    </Row>
+                </Container>
+            )
+        } />
+    );
+}

frontend/src/pages/AdminStaffPage.js

@@ -0,0 +1,21 @@
+import { Container, Row, Col } from "react-bootstrap";
+import AdminTemplate from "../templates/AdminTemplate";
+
+export default function AdminStaffPage() {
+    return (
+        <AdminTemplate content={
+            (
+                <Container className='d-flex text-center align-items-center justify-content-center' style={{ 'min-height': '80vh' }}>
+                    <Row>
+                        <Col xs={12}>
+                            <h1>This is a demo staff page</h1>
+                        </Col>
+                        <Col xs={12}>
+                            <h3>In the future, we are about to view staffs info, add, edit, and remove staffs in this page</h3>
+                        </Col>
+                    </Row>
+                </Container>
+            )
+        } />
+    );
+}

frontend/src/pages/AdminSummaryPage.js

@@ -0,0 +1,21 @@
+import { Container, Row, Col } from "react-bootstrap";
+import AdminTemplate from "../templates/AdminTemplate";
+
+export default function AdminSummaryPage() {
+    return (
+        <AdminTemplate content={
+            (
+                <Container className='d-flex text-center align-items-center justify-content-center' style={{ 'min-height': '80vh' }}>
+                    <Row>
+                        <Col xs={12}>
+                            <h1>This is a demo summary page</h1>
+                        </Col>
+                        <Col xs={12}>
+                            <h3>In the future, we hope to connect to PowerBI API and show the dashboard</h3>
+                        </Col>
+                    </Row>
+                </Container>
+            )
+        } />
+    );
+}

frontend/src/pages/LoginPage.js

@@ -51,11 +51,12 @@ export default function LoginPage() {
                     }
                 })
                 .catch((error) => {
-                    if (error.status === 400) {
-                        setError('Lỗi đăng nhập, vui lòng kiểm tra lại tài khoản và mật khẩu');
-                    } else if (error.status === 500) {
-                        setError('Server đang tạm gặp vấn đề');
-                    }
+                    // if (error.status === 400) {
+                    //     setError('Lỗi đăng nhập, vui lòng kiểm tra lại tài khoản và mật khẩu');
+                    // } else if (error.status === 500) {
+                    //     setError('Server đang tạm gặp vấn đề');
+                    // }
+                    setError(JSON.stringify(error));
                 })
 
         }
@@ -76,10 +77,10 @@ export default function LoginPage() {
                                     {error && <Alert variant="danger">{error}</Alert>}
 
                                     <Form.Group controlId="username" className='mb-3'>
-                                        <Form.Label>Tên đăng nhập</Form.Label>
+                                        <Form.Label>Email/Số điện thoại</Form.Label>
                                         <Form.Control
                                             type="text"
-                                            placeholder="Tên đăng nhập"
+                                            placeholder="Email/số điện thoại"
                                             onChange={(e) => setUsername(e.target.value)}
                                         />
                                     </Form.Group>

frontend/src/pages/RegisterPage.js

@@ -3,6 +3,9 @@ import validator from 'validator';
 import { useNavigate } from 'react-router-dom';
 import { Container, Form, Button, Alert, Row, Col, Card } from 'react-bootstrap';
 import BasicTemplate from '../templates/BasicTemplate';
+import axios from 'axios';
+import DataStorage from '../organisms/DataStorage';
+import jwtDecoder from '../organisms/jwtDecoder';
 
 const RegisterPage = () => {
     const [full_name, setFullname] = useState('');
@@ -14,13 +17,15 @@ const RegisterPage = () => {
 
     const navigator = useNavigate();
 
+    const domain = process.env.REACT_APP_API_URL;
+
     const handleSubmit = (e) => {
         e.preventDefault();
         // Validate password and confirm password match
         if (full_name.length === 0) {
             setError('Họ và tên không thể để trống');
         } else if (!validator.isMobilePhone(phone_number, 'vi-VN')) {
-            setError('Số điện thoại không hợp lệ');        
+            setError('Số điện thoại không hợp lệ');
         } else if (!validator.isEmail(email)) {
             setError('Email không hợp lệ');
         } else if (password.length < 8) {
@@ -30,7 +35,40 @@ const RegisterPage = () => {
         } else {
             setError('');
             // gọi API đăng ký ở đây
-            console.log('Đăng ký thành công:',  {full_name, password });
+            let data = {
+                "email": email,
+                "phone_number": phone_number,
+                "full_name": full_name,
+                "password": password
+            }
+
+            axios.post(domain + '/authentication/signup', data)
+                .then((response) => {
+                    if (response.status === 200 || response.status === 201) {
+                        const decodedToken = jwtDecoder(response.data.access_token);
+                        const full_name = decodedToken.payload.username;
+                        const role = decodedToken.payload.roles;
+                        const expiryTime = decodedToken.payload.exp;
+                        DataStorage.set('expiryDate', expiryTime, { expiryDate: expiryTime });
+                        DataStorage.set('username', full_name);
+                        DataStorage.set('role', role);
+                        DataStorage.set('isLoggedIn', 'true');
+                        DataStorage.set('accessToken', response.data.access_token);
+                        DataStorage.set('cart', '{}');
+                        navigator('/');
+                    } else {
+                        setError(JSON.stringify(response));
+                    }
+                })
+                .catch((error) => {
+                    if (error.status === 400) {
+                        setError('Lỗi đăng ký');
+                    } else if (error.status === 500) {
+                        setError('Server đang tạm gặp vấn đề');
+                    }
+                })
+
+            console.log('Đăng ký thành công:', { full_name, password });
             navigator('/');
         }
     };
@@ -57,7 +95,7 @@ const RegisterPage = () => {
                                             type="text"
                                             placeholder="Họ và tên"
                                             onChange={(e) => setFullname(e.target.value)}
-                                            
+
                                         />
                                     </Form.Group>
 
@@ -68,7 +106,7 @@ const RegisterPage = () => {
                                             type="text"
                                             placeholder="Số điện thoại"
                                             onChange={(e) => setPhoneNumber(e.target.value)}
-                                            
+
                                         />
                                     </Form.Group>
 
@@ -79,7 +117,7 @@ const RegisterPage = () => {
                                             type="text"
                                             placeholder="Email"
                                             onChange={(e) => setEmail(e.target.value)}
-                                            
+
                                         />
                                     </Form.Group>
 
@@ -90,7 +128,7 @@ const RegisterPage = () => {
                                             type="password"
                                             placeholder="Nhập mật khẩu"
                                             onChange={(e) => setPassword(e.target.value)}
-                                            
+
                                         />
                                     </Form.Group>
 
@@ -100,7 +138,7 @@ const RegisterPage = () => {
                                             type="password"
                                             placeholder="Xác nhận mật khẩu"
                                             onChange={(e) => setConfirmPassword(e.target.value)}
-                                            
+
                                         />
                                     </Form.Group>
                                     <div className='d-flex justify-content-between align-items-center'>

frontend/src/styles/styles.css

@@ -0,0 +1,170 @@
+/* Thay đổi màu sắc chính của trang */
+:root {
+    --primary-color: #300604;
+    /* Màu đỏ ấm, có thể chỉnh sửa */
+    --secondary-color: #b17219;
+    /* Màu cam nhạt */
+    --background-color: #222020;
+    /* Màu nền nhẹ nhàng */
+    --text-color: #fbf5f5;
+    /* Màu chữ chính */
+    --container-background-color: rgba(44, 41, 41, 0.5);
+    background-color: var(--background-color);
+}
+
+/* Đặt nền cho toàn bộ trang */
+body {
+    color: var(--text-color);
+    /* background-image: url('../../public/header.jpg'); */
+    background-color: var(--background-color); /* Màu nền */
+    /* Hoặc sử dụng hình ảnh nền */
+    background-size: cover; /* Để hình ảnh phủ đầy toàn bộ trang */
+    background-repeat: no-repeat; /* Để hình ảnh không lặp lại */
+    background-attachment: fixed; /* Để nền cố định khi cuộn trang */
+    background-position: center; /* Căn giữa hình ảnh */
+  }
+  
+
+/* Container */
+.container {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    background-color: var(--container-background-color);
+}
+
+/* Navbar */
+.navbar {
+    background-color: var(--primary-color) !important;
+    font-size: 1.1rem;
+}
+
+.navbar-brand,
+.nav-link {
+    color: #fff !important;
+    font-weight: bold;
+    transition: color 0.3s;
+}
+
+.nav-link:hover {
+    color: var(--secondary-color) !important;
+}
+
+.navbar-toggler {
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+.navbar-light .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+}
+
+/* Button */
+.btn-primary {
+    background-color: var(--secondary-color);
+    border-color: var(--secondary-color);
+    color: #fff;
+    font-weight: bold;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.btn-primary:hover {
+    background-color: #e99e40;
+    border-color: #e99e40;
+}
+
+/* .btn-outline-primary {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+    font-weight: bold;
+}
+
+.btn-outline-primary:hover {
+    background-color: var(--primary-color);
+    color: #fff;
+} */
+
+/* Style cho nút secondary */
+.btn-outline-primary {
+    background-color: var(--text-color);
+    /* Màu nền trắng */
+    color: var(--primary-color);
+    /* Màu chữ đỏ */
+    font-weight: bold;
+    border-color: var(--secondary-color);
+    /* Màu viền đỏ */
+}
+
+.btn-outline-primary:hover {
+    background-color: #c2bdaf;
+    /* Màu nền nhạt hơn khi hover */
+    color: var(--primary-color);
+    /* Màu chữ đỏ khi hover */
+    border-color: var(--secondary-color);
+    /* Giữ màu viền đỏ khi hover */
+}
+
+
+
+/* Card */
+.card {
+    border: none;
+    border-radius: 10px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s;
+}
+
+.card:hover {
+    transform: scale(1.02);
+}
+
+.card-img-top {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    height: 200px;
+    /* Tùy chỉnh chiều cao ảnh */
+    object-fit: cover;
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+
+.card-text {
+    color: var(--text-color);
+}
+
+.card-footer {
+    background-color: #fff;
+    border-top: none;
+    text-align: center;
+}
+
+/* Container cho các phần */
+.menu-section {
+    padding: 40px 0;
+    background-color: #fff;
+}
+
+.header-section {
+    padding: 60px 0;
+    background-image: url('../../public/header.jpg');
+    /* Thêm hình nền nếu có */
+    background-size: cover;
+    background-position: center;
+    /* color: #fff; */
+    text-align: center;
+}
+
+.header-section h1 {
+    font-size: 2.5rem;
+    font-weight: bold;
+}
+
+.header-section p {
+    font-size: 1.2rem;
+    margin-top: 10px;
+    max-width: 600px;
+    margin: auto;
+    color: #f1f1f1;
+}

frontend/src/templates/AdminTemplate.js

@@ -0,0 +1,16 @@
+// pages/HomePage.js
+// import React, { useState } from 'react';
+import AdminNavbar from '../molecules/AdminNavBar';
+function AdminTemplate ({content}) {
+    // const [isLoggedIn, setIsLoggedIn] = useState(false);
+    // const [user, setUser] = useState({ name: 'User' });
+
+    return (
+        <>
+            <AdminNavbar></AdminNavbar>
+            {content}
+        </>
+    );
+};
+
+export default AdminTemplate;