Merge pull request #44 from PBL6-team-CATS/feature/frontend_update

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,103 @@ 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';
+import AdminLoginPage from './pages/AdminLoginPage';
+import AdminUserInfoPage from './pages/AdminUserInfoPage';
+
 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 />
+    },
+// admin section
+    {
+        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 />
+    },
+    {
+        path: "/admin-login",
+        element: <AdminLoginPage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path:"/admin-info",
+        element: <AdminUserInfoPage/>,
+        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,71 @@
+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="/admin-info" variant='primary'>
+                    Xin chào, ADMIN {username}
+                </Button>
+                <Button onClick={handleLogout} variant='outline-primary'>
+                    Đăng xuất
+                </Button>
+            </Stack>
+        </>
+    } else {
+        userContent = <>
+        <Stack direction='horizontal' gap={2}>
+            <Button href="/admin-login" variant='primary'>
+                Đăng nhập
+            </Button>
+        </Stack>
+    </>
+    }
+    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 disabled={!isLoggedIn} href="/admin-summary">Dashboard</Nav.Link>
+                        <Nav.Link disabled={!isLoggedIn} href="/admin-feed">Bài đăng</Nav.Link>
+                        <Nav.Link disabled={!isLoggedIn} href="/admin-menu">Thực đơn</Nav.Link>
+                        <Nav.Link disabled={!isLoggedIn} href="/admin-staff">Nhân viên</Nav.Link>
+                        <Nav.Link disabled={!isLoggedIn} href="/admin-schedule">Lịch làm việc</Nav.Link>
+                        <Nav.Link disabled={!isLoggedIn} href="/admin-orders">Đơ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

@@ -1,4 +1,4 @@
-import {Container, Nav, Navbar, Button, Stack} from 'react-bootstrap'
+import { Container, Nav, Navbar, Button, Stack } from 'react-bootstrap'
 import { useNavigate } from 'react-router-dom';
 import DataStorage from '../organisms/DataStorage';
 
@@ -7,7 +7,7 @@ export default function ANavbar() {
     const navigate = useNavigate();
 
     function handleLogout() {
-        DataStorage.set('isLoggedIn','false');
+        DataStorage.set('isLoggedIn', 'false');
         DataStorage.remove('accessToken');
         DataStorage.remove('role');
         DataStorage.remove('username');
@@ -49,17 +49,21 @@ 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={{ minHeight: '6vh' }}>
+            <Container fluid style={{ maxWidth: "90%" }}>
                 <Navbar.Brand href="/">
-                    <img
-                        alt=""
-                        src="/cats-logo.png"
-                        width="30"
-                        height="30"
-                        className="d-inline-block align-top"
-                    />{' '}
-                    CATS-Shop
+                    <div style={{ fontWeight: 'bold' }}>
+                        <span className='mr-1'>
+                            <img
+                                alt=""
+                                src="/cats-logo.png"
+                                width="30"
+                                height="30"
+                                className="d-inline-block align-top"
+                            />
+                        </span>
+                        {" "}
+                        CATS - Shop</div>
                 </Navbar.Brand>
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav">

frontend/src/organisms/CacheStorage.js

@@ -0,0 +1,91 @@
+import Cookies from 'js-cookie';
+
+export default class CacheStorage {
+    static storageMethod = process.env.REACT_APP_CACHE_METHOD;
+
+    // Get data
+    static get(key) {
+        if (this.storageMethod === 'session') {
+            return sessionStorage.getItem(key);
+        } else if (this.storageMethod === 'cookie') {
+            return Cookies.get(key);
+        }
+        return null;
+    }
+
+    // Set data
+    static set(key, value, param = { expiryDate: null }) {
+        if (this.storageMethod === 'session') {
+            sessionStorage.setItem(key, value);
+        } else if (this.storageMethod === 'cookie') {
+            if (param.expiryDate) {
+                const expiryDate = new Date(param.expiryDate * 1000);
+                Cookies.set(key, value, { expires: expiryDate })
+            } else if (Cookies.get('expiryDate')) {
+                const expiryDate = new Date(Cookies.get('expiryDate') * 1000);
+                Cookies.set(key, value, { expires: expiryDate }); 
+            } else Cookies.set(key, value, { expires: 7 })// Expires in 7 by default
+        }
+    }
+
+    // Remove data
+    static remove(key) {
+        if (this.storageMethod === 'session') {
+            sessionStorage.removeItem(key);
+        } else if (this.storageMethod === 'cookie') {
+            Cookies.remove(key);
+        }
+    }
+
+    // Get all data
+    static getAll() {
+        const data = {};
+        if (this.storageMethod === 'session') {
+            for (let i = 0; i < sessionStorage.length; i++) {
+                const key = sessionStorage.key(i);
+                data[key] = sessionStorage.getItem(key);
+            }
+        } else if (this.storageMethod === 'cookie') {
+            const cookies = Cookies.get();
+            Object.keys(cookies).forEach(key => {
+                data[key] = cookies[key];
+            });
+        }
+        return data;
+    }
+
+    // Clear all data
+    static clearAll() {
+        if (this.storageMethod === 'session') {
+            sessionStorage.clear();
+        } else if (this.storageMethod === 'cookie') {
+            const cookies = Cookies.get();
+            Object.keys(cookies).forEach(key => {
+                Cookies.remove(key);
+            });
+        }
+    }
+
+    // Check if a key exists
+    static hasKey(key) {
+        if (this.storageMethod === 'session') {
+            return sessionStorage.getItem(key) !== null;
+        } else if (this.storageMethod === 'cookie') {
+            return Cookies.get(key) !== undefined;
+        }
+        return false;
+    }
+
+    // Get all keys
+    static getKeys() {
+        const keys = [];
+        if (this.storageMethod === 'session') {
+            for (let i = 0; i < sessionStorage.length; i++) {
+                keys.push(sessionStorage.key(i));
+            }
+        } else if (this.storageMethod === 'cookie') {
+            keys.push(...Object.keys(Cookies.get()));
+        }
+        return keys;
+    }
+}

frontend/src/organisms/MenuSection.js

@@ -1,58 +1,151 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Container, Carousel, Row, Col, Button } from 'react-bootstrap';
 import MenuItem from '../molecules/MenuItem';
+import CacheStorage from './CacheStorage';
+import axios from 'axios';
+
+const carouselImages = [
+    { itemType: 1, imageUrl: '/dishes.jpg' },
+    { itemType: 2, imageUrl: '/drinks.jpg' },
+    { itemType: 3, imageUrl: '/desserts.jpg' },
+];
 
 function MenuSection() {
-  const [index, setIndex] = useState(0);
-
-  const handleSelect = (selectedIndex) => {
-    setIndex(selectedIndex);
-  };
-
-  const menuItems = [
-    { name: 'Món 1', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
-    { name: 'Món 2', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
-    { name: 'Món 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
-  ];
-
-  const countCarouselSlides = 4;
-
-  return (
-    <Container id="menu" className="text-center justify-content-center align-items-center my-5">
-      <h1 className='mb-5'>Menu</h1>
-      <Carousel activeIndex={index} onSelect={handleSelect} data-bs-theme="dark">
-        {Array.from({ length: countCarouselSlides }).map((_, slideIndex) => (
-          <Carousel.Item key={slideIndex}>
-            <div className="d-flex justify-content-center align-items-center" style={{ width: '100%' }}>
-              <img
-                className="img-fluid"
-                src="/placeholder4.jpg"
-                alt="a placeholder"                
-                style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
-              />
-            </div>
-
-            <Carousel.Caption>
-              <div className='my-5'>
-                <Row md={3} className="g-4">
-                  {menuItems.map((item, idx) => (
-                    <Col key={idx}>
-                      <MenuItem
-                        dishName={item.name}
-                        description={item.description}
-                        imageSrc={item.imageSrc}
-                      />
-                    </Col>
-                  ))}
-                </Row>
-                <Button as='a' href='/menu' className='mt-5'> Xem thêm các món </Button>
-              </div>
-            </Carousel.Caption>
-          </Carousel.Item>
-        ))}
-      </Carousel>
-    </Container>
-  );
+
+    const [carouselMaxHeight, setHeight] = useState('700px');
+    const [index, setIndex] = useState(0);
+    const [menuItems, setMenuItems] = useState({}); // Đối tượng lưu danh sách món theo từng itemType
+    const [loading, setLoading] = useState(true);
+
+    const handleSelect = (selectedIndex) => {
+        setIndex(selectedIndex);
+    };
+
+    // const menuItems = [
+    //   { name: 'Món 1', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
+    //   { name: 'Món 2', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
+    //   { name: 'Món 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
+    // ];
+
+
+    const categoryMapper = {
+        1: 'Món chính',
+        2: 'Đồ uống',
+        3: 'Tráng miệng',
+    };
+
+    useEffect(() => {
+        const fetchMenuItems = async () => {
+            try {
+                const menuItemsByType = {};
+
+                for (const carousel of carouselImages) {
+                    // Gọi API để lấy món theo itemType
+                    const response = await axios.get(process.env.REACT_APP_API_URL + `/menu-items?limit=3&filter.item_type=${carousel.itemType}`);
+                    // Lưu danh sách món theo itemType
+                    menuItemsByType[carousel.itemType] = response.data.data;
+                }
+                console.log(menuItemsByType);
+                setMenuItems(menuItemsByType);
+                setLoading(false);
+                CacheStorage.set('homeMenuItems',JSON.stringify(menuItemsByType));
+                console.log('fetched from API');
+            } catch (error) {
+                console.error('Error fetching menu items:', error);
+                setLoading(false);
+            }
+        };
+        if (CacheStorage.get('homeMenuItems')) {
+            setMenuItems(JSON.parse(CacheStorage.get('homeMenuItems')));
+            setLoading(false);
+            console.log('fetched from cache');
+        } else {
+            fetchMenuItems();
+        }
+    }, []);
+
+    useEffect(() => {
+        const handleResize = () => {
+            if (window.innerWidth < 992) { // md
+                setHeight('1500px'); // Không giới hạn chiều cao
+            } else {
+                setHeight('700px'); // Giới hạn chiều cao cho md trở lên
+            }
+        };
+
+        // Đăng ký event resize
+        window.addEventListener('resize', handleResize);
+
+        // Gọi lần đầu để xác định chiều cao ban đầu
+        handleResize();
+
+        // Cleanup
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
+
+    let menuContent;
+
+    if (loading) {
+        menuContent = (<p>Đang tải dữ liệu</p>);
+    } else {
+        menuContent = (<Carousel activeIndex={index} onSelect={handleSelect} data-bs-theme="dark">
+            {carouselImages.map((carousel, index) => (
+                <Carousel.Item key={index}>
+                    <div className="d-flex justify-content-center align-items-center" style={{ width: '100%' }}>
+                        <img
+                            className="img-fluid"
+                            src={carousel.imageUrl}
+                            alt={`Carousel ${carousel.itemType}`}
+                            style={{
+                                height: carouselMaxHeight,
+                                width: '100vw',
+                                objectPosition: 'center',
+                                objectFit: 'cover',
+                            }}
+                        />
+                        <div
+                            style={{
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                width: '100%',
+                                height: '100%',
+                                backgroundColor: 'rgba(0, 0, 0, 0.5)', // Màu tối với độ trong suốt
+                            }}
+                        ></div>
+                    </div>
+
+                    <Carousel.Caption>
+                        <div className='my-5'>
+                            <h1 style={{ color: "var(--text-color)" }} className='mb-5'>{categoryMapper[carousel.itemType]}</h1>
+                            <Row className="g-4">
+                                {Array.from(menuItems[carousel.itemType]).map((item, idx) => (
+                                    <Col sm={12} lg={4} key={idx}>
+                                        <MenuItem
+                                            dishName={item.item_name}
+                                            description={item.description}
+                                            imageSrc={item.image_url}
+                                        />
+                                    </Col>
+                                ))}
+                            </Row>
+                            <Button as='a' href='/menu' className='mt-5'> Xem thêm các món </Button>
+                        </div>
+                    </Carousel.Caption>
+                </Carousel.Item>
+            ))}
+        </Carousel>);
+    }
+
+    return (
+        <Container id="menu" className="text-center justify-content-center align-items-center my-5" style={{ maxWidth: "100%" }}>
+            <h1 className='mb-5'>Menu</h1>
+            {menuContent}
+        </Container>
+    );
 }
 
 export default MenuSection;

frontend/src/organisms/NewsSection.js

@@ -1,30 +1,62 @@
 import { Container, Col, Row } from 'react-bootstrap';
 import NewsItem from '../molecules/NewsItem';
+import CacheStorage from './CacheStorage';
+import axios from 'axios';
+import { useState, useEffect } from 'react';
 
 function NewsSection() {
     
-    const newsFeeds = [
-        { title: 'Feed 1', text: 'This is the first feed', imageSrc: '/placeholder1.jpg', feedHref: '' }, 
-        { title: 'Feed 2', text: 'This is the second feed', imageSrc: '/placeholder1.jpg', feedHref: '' }, 
-        { title: 'Feed 3', text: 'This is the third feed', imageSrc: '/placeholder1.jpg', feedHref: ''}
-    ];
-   
+    const [feeds, setFeeds] = useState([]); // Lưu danh sách bài đăng
+    const [loading, setLoading] = useState(true); // Trạng thái tải dữ liệu
+    
+    useEffect(() => {
+        const fetchFeeds = async () => {
+            try {
+                const response = await axios.get(process.env.REACT_APP_API_URL + '/feeds?limit=3');
+                setFeeds(response.data.data);
+                setLoading(false);
+                CacheStorage.set('feeds',JSON.stringify(response.data.data));
+                console.log(response.data);
+            } catch (error) {
+                console.error('Error fetching branches:', error);
+                setLoading(false);
+            }
+        }
+
+        if (CacheStorage.get('feeds')) {
+            setFeeds(JSON.parse(CacheStorage.get('feeds')));
+            setLoading(false);
+            console.log(JSON.parse(CacheStorage.get('feeds')));
+            console.log('fetched from cache');
+        } else {
+            fetchFeeds();
+        }
+    }, []);
+
+    let feedContent;
+
+    if (loading) {
+        feedContent = (<p>Đang tải các bài đăng...</p>);
+    } else {
+        feedContent = (<Row xs={1} md={2} xl={3} className="g-4">
+            {Array.from(feeds).map((feed, idx) => (
+                <Col key={idx}>
+                    <NewsItem title={feed.title}
+                        text={feed.description}
+                        imageSrc={feed.image_url}
+                        // feedHref={feed.feedHref}
+                        feedHref={'/news?id='+feed.id} //demo
+                        >
+                    </NewsItem>
+                </Col>
+            ))}
+        </Row>);
+    }
+
     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) => (
-                    <Col key={idx}>
-                        <NewsItem title={feed.title}
-                            text={feed.text}
-                            imageSrc={feed.imageSrc}
-                            // feedHref={feed.feedHref}
-                            feedHref="/news" //demo
-                            >
-                        </NewsItem>
-                    </Col>
-                ))}
-            </Row>
+            {feedContent}
         </Container>
     );
 }

frontend/src/organisms/StoreSection.js

@@ -1,36 +1,71 @@
 import { Container, Col, Row } from 'react-bootstrap';
 import StoreItem from '../molecules/StoreItem';
+import CacheStorage from './CacheStorage';
+import axios from 'axios';
+import { useState, useEffect } from 'react';
 
 function StoreSection() {
-    
-    const stores = [
-        { storeName: 'Store 1', address: 'Address 1', imageSrc: '/placeholder2.jpg' }, 
-        { storeName: 'Store 2', address: 'Address 2', imageSrc: '/placeholder2.jpg' },
-        { storeName: 'Store 3', address: 'Address 3', imageSrc: '/placeholder2.jpg' },
-    ];
+
+    // const stores = [
+    //     { storeName: 'Store 1', address: 'Address 1', imageSrc: '/placeholder2.jpg' }, 
+    //     { storeName: 'Store 2', address: 'Address 2', imageSrc: '/placeholder2.jpg' },
+    //     { storeName: 'Store 3', address: 'Address 3', imageSrc: '/placeholder2.jpg' },
+    // ];
+
+    const [stores, setStores] = useState([]); // Lưu danh sách chi nhánh
+    const [loading, setLoading] = useState(true); // Trạng thái tải dữ liệu
+
+    useEffect(() => {
+        // Gọi API lấy danh sách chi nhánh
+        const fetchBranches = async () => {
+            try {
+                const response = await axios.get(process.env.REACT_APP_API_URL + '/branchs'); // Thay 'API_ENDPOINT' bằng URL của API
+                setStores(response.data); // Lưu dữ liệu vào state
+                setLoading(false); // Đặt loading thành false khi hoàn tất
+                CacheStorage.set('stores',JSON.stringify(Object(response.data)));
+            } catch (error) {
+                console.error('Error fetching branches:', error);
+                setLoading(false); // Đặt loading thành false nếu lỗi
+            }
+        };
+        if (CacheStorage.get('stores')) {
+            setStores(JSON.parse(CacheStorage.get('stores')));
+            setLoading(false);
+        } else {
+            fetchBranches();
+        }
+    }, []); // Chỉ chạy một lần khi component được mount
+
+    let storesContent;
+
+    if (loading) {
+        storesContent = (<p>Đang tải danh sách chi nhánh...</p>); // Hiển thị thông báo khi đang tải dữ liệu
+    } else {
+        storesContent = (<Col xs={12} md={9}>
+            <Container fluid>
+                <Row xs={1} md={2} xl={3} className="g-4">
+                    {Array.from(stores).map((store, idx) => (
+                        <Col key={idx}>
+                            <StoreItem storeName={store.name}
+                                address={store.location}
+                                imageSrc={store.image_url}>
+                            </StoreItem>
+                        </Col>
+                    ))}
+                </Row>
+            </Container>
+        </Col>)
+    }
 
     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">
-                    Đây là các chi nhánh đang mở, chưa mở, sắp mở và có thể là sẽ không mở
+                <Col xs={12} md={3} className="d-flex justify-content-center align-items-center">
+                    Là hệ thống chuỗi nhà hàng nổi tiếng toàn quốc, chúng tôi đang hoạt động ở các cơ sở sau
                 </Col>
 
-                <Col xs={12} md={8}>
-                    <Container>
-                        <Row xs={1} md={2} xl={3} className="g-4">
-                            {Array.from(stores).map((store, idx) => (
-                                <Col key={idx}>
-                                    <StoreItem storeName={store.storeName}
-                                        address={store.address}
-                                        imageSrc={store.imageSrc}>
-                                    </StoreItem>
-                                </Col>
-                            ))}
-                        </Row>
-                    </Container>
-                </Col>
+                {storesContent}
             </Row>
         </Container>
     );

frontend/src/pages/AdminFeedPage.js

@@ -0,0 +1,22 @@
+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={{ minHeight: '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/AdminLoginPage.js

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { Alert, Container, Form, Row, Col, Button, Card } from "react-bootstrap";
+import AdminTemplate from "../templates/AdminTemplate";
+import { useNavigate } from "react-router-dom";
+import axios from 'axios';
+import jwtDecoder from "../organisms/jwtDecoder";
+import DataStorage from "../organisms/DataStorage";
+
+export default function AdminLoginPage() {
+
+    const domain = process.env.REACT_APP_API_URL;
+
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+
+    const navigate = useNavigate();
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Validate password and confirm password match
+        if (password.length === 0) {
+            setError('Hãy nhập mật khẩu');
+        } else if (username.trim().length === 0) {
+            setError('Tên đăng nhập không thể trống')
+        } else {
+            setError('');
+
+            let data = {
+                'username': username,
+                'password': password
+            }
+
+            axios.post(domain + '/authentication/login', data)
+                .then((response) => {
+                    if (response.status === 200) {
+                        // setError(JSON.stringify(jwtDecoder(response.data.access_token)));
+                        const decodedToken = jwtDecoder(response.data.access_token);
+                        const role = decodedToken.payload.roles;
+
+                        if (role !== 'ADMIN' && role !== 'AREA_MANAGER' && role !== 'BRANCH_MANAGER') {
+                            setError('TÀI KHOẢN KHÔNG HỢP LỆ');
+                        } else {
+                            const full_name = decodedToken.payload.username;
+                            const expiryTime = decodedToken.payload.exp;
+                            DataStorage.set('expiryDateAdmin', expiryTime, { expiryDate: expiryTime });
+                            DataStorage.set('usernameAdmin', full_name);
+                            DataStorage.set('roleAdmin', role);
+                            DataStorage.set('isLoggedInAdmin', 'true');
+                            DataStorage.set('accessTokenAdmin', response.data.access_token);
+                            navigate('/admin');
+                        }
+                    } else {
+                        setError(JSON.stringify(response));
+                    }
+                })
+                .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 đề');
+                    // }
+                    setError(JSON.stringify(error));
+                })
+        }
+    };
+
+    return (
+        <AdminTemplate content={
+            (<Container fluid className="d-flex justify-content-center align-items-center mt-5"
+                style={{
+                    maxWidth: "100%",
+                    minHeight: "70vh",
+                    }}>
+                <Row style={{ maxWidth: "90vw" }}>
+                    {/* <Col xs={1} md={2}></Col> */}
+                    <Col xs={10} md={8}>
+                        <Card style={{ width: '35vw' }} className='justify-content-center card-nospan'>
+                            <Card.Header>
+                                <Card.Title className='mt-1 text-center'>Đăng nhập quyền quản lý</Card.Title>
+                            </Card.Header>
+                            <Card.Body>
+                                <Form onSubmit={handleSubmit} >
+                                    {error && <Alert variant="danger">{error}</Alert>}
+
+                                    <Form.Group controlId="username" className='mb-3'>
+                                        <Form.Label>Administration credential</Form.Label>
+                                        <Form.Control
+                                            type="text"
+                                            placeholder="Administrator email"
+                                            onChange={(e) => setUsername(e.target.value)}
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="password" className='mb-4'>
+                                        <Form.Label>Mật khẩu</Form.Label>
+                                        <Form.Control
+                                            type="password"
+                                            placeholder="Mật khẩu"
+                                            onChange={(e) => setPassword(e.target.value)}
+                                        />
+                                    </Form.Group>
+                                    <div className='d-flex justify-content-center align-items-center'>
+                                        {/* <Button as='a' variant='outline-primary' href="/register" className='m-2'>Đăng ký</Button> */}
+                                        <Button type="submit" className='m-2'>Đăng nhập</Button>
+                                        {/* <Button as='a' variant='outline-primary' href="/forgot-password" className='m-2'>Quên mật khẩu</Button> */}
+                                    </div>
+
+                                </Form>
+                            </Card.Body>
+                        </Card>
+
+                    </Col>
+                    {/* <Col xs={1} md={2}></Col> */}
+                </Row>
+            </Container>)
+        }>
+        </AdminTemplate>
+    );
+}

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={{ minHeight: '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={{ minHeight: '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={{ minHeight: '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={{minHeight: '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,33 @@
+import { Container, Row, Col } from "react-bootstrap";
+import AdminTemplate from "../templates/AdminTemplate";
+import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+import DataStorage from "../organisms/DataStorage";
+
+export default function AdminSummaryPage() {
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!DataStorage.get('isLoggedInAdmin')) {
+            navigate('/admin-login');
+        }
+    }, [navigate]);
+
+    return (
+        <AdminTemplate content={
+            (
+                <Container className='d-flex text-center align-items-center justify-content-center' style={{ minHeight: '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/AdminUserInfoPage.js

@@ -0,0 +1,255 @@
+import AdminTemplate from "../templates/AdminTemplate";
+import { Container, Form, Row, Col, Card, Alert, Button, Image } from "react-bootstrap";
+import React, { useState, useEffect } from "react";
+import validator from "validator";
+import axios from "axios";
+import DataStorage from "../organisms/DataStorage";
+
+export default function AdminUserInfoPage() {
+
+    // fetch data:
+
+    const [error, setErrors] = useState("");
+    const [initialData, setInitialData] = useState(null);
+    const [formData, setFormData] = useState({
+        avatar: "/default_avatar.jpg",
+        full_name: "",
+        phone_number: "",
+        address: "",
+        email: "",
+        password: "",
+        confirmPassword: "",
+    });
+
+    useEffect(() => {
+        axios
+            .get(process.env.REACT_APP_API_URL + '/authentication/profile', {
+                headers: {
+                    Authorization: `Bearer ${DataStorage.get('accessToken')}`,
+                },
+            })
+            .then((response) => {
+                if (response.status === 401) {
+                    // phiên hết hạn
+                    setErrors(JSON.stringify(response));
+                } else {
+                    const { avatar, full_name, address, phone_number, email } = response.data;
+                    const fetchedData = {
+                        avatar: avatar || "/default_avatar.jpg",
+                        full_name: full_name || "",
+                        phone_number: phone_number || "",
+                        address: address || "",
+                        email: email || "",
+                        password: "",
+                        confirmPassword: "",
+                    };
+
+                    if (fetchedData.full_name !== DataStorage.get('username')) DataStorage.set('username', fetchedData.full_name)
+                    setInitialData(fetchedData);
+                    setFormData(fetchedData);
+                }
+            })
+            .catch((error) => {
+                setErrors(JSON.stringify(error));
+            });
+    }, []);
+
+    // console.log('formdata', formData);
+    // console.log('initialdata', initialData);
+    // State để hiển thị lỗi khi validation
+
+    const [isChanged, setChanged] = useState(false);
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({ ...formData, [name]: value });
+    };
+
+    // Hàm xử lý thay đổi avatar
+    const handleAvatarChange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            setFormData((prevData) => ({
+              ...prevData,
+              avatar: reader.result // Cập nhật ảnh đại diện
+            }));
+          };
+          reader.readAsDataURL(file);
+          setChanged(true);
+        }
+      };
+
+    useEffect(() => {
+        const hasChanges = () => {
+            if (initialData) {
+                for (let key in formData) {
+                    if (formData[key] !== initialData[key]) {
+                        return true;
+                    }
+                }
+                return false;
+            } else {
+                return false;
+            }
+        };
+        setChanged(hasChanges());
+    }, [formData, initialData]);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setChanged(false); // prevent another click
+        if (formData.phone_number.trim() !== "" && !validator.isMobilePhone(formData.phone_number, 'vi-VN')) setErrors("Số điện thoại không hợp lệ");
+        else if (formData.email.trim() !== "" && !validator.isEmail(formData.email)) setErrors("Email không hợp lệ");
+        else if (formData.password !== "" && formData.confirmPassword !== formData.password) setErrors("Mật khẩu không khớp");
+        else {
+
+            // let avatarBase64 = null;
+
+            // if (formData.avatar) {
+            //     // Chuyển ảnh đại diện thành chuỗi Base64
+            //     avatarBase64 = await new Promise((resolve, reject) => {
+            //         const reader = new FileReader();
+            //         reader.onloadend = () => resolve(reader.result.split(",")[1]); // Chỉ lấy phần Base64
+            //         reader.onerror = (error) => reject(error);
+            //         reader.readAsDataURL(formData.avatar);
+            //     });
+            // }
+
+            let data = {};
+
+            // if (avatarBase64) data.avatar = avatarBase64;
+            if (formData.full_name.trim() !== "" && formData.full_name.trim() !== initialData.full_name) data.full_name = formData.full_name.trim();
+            if (formData.phone_number.trim() !== "" && formData.phone_number.trim() !== initialData.phone_number) data.phone_number = formData.phone_number.trim();
+            if (formData.address.trim() !== "" && formData.address.trim() !== initialData.address) data.address = formData.address.trim();
+            if (formData.email.trim() !== "" && formData.email.trim() !== initialData.email) data.email = formData.email.trim();
+            if (formData.password.trim() !== "") data.hash_password = formData.password;
+
+            // gửi request ở đây
+            axios.post(process.env.REACT_APP_API_URL + '/users/updateUser', data, {
+                headers: {
+                    Authorization: `Bearer ${DataStorage.get('accessToken')}`,
+                }
+            }).then((response) => {
+                if (response.status === 200 || response.status === 201) {
+                    window.location.reload(); // cập nhật lại thông tin
+                } else {
+                    setErrors(JSON.stringify(response));
+                }
+            }).catch((error) => setErrors(JSON.stringify(error)));
+        }
+    };
+
+    return <AdminTemplate content={
+        (
+            <Container fluid className="d-flex align-items-center justify-content-center mt-5">
+                <Row>
+                    <Col xs={10} md={8}>
+                        <Card style={{ width: '30rem' }} className='justify-content-center'>
+                            <Card.Header>
+                                <Card.Title className='mt-1 text-center'>Thông tin khách hàng</Card.Title>
+                            </Card.Header>
+                            <Card.Body>
+
+                                <Form onSubmit={handleSubmit}>
+                                    {error && <Alert variant="danger">{error}</Alert>}
+                                    <Row className="mb-3">
+                                        <Col xs={12} md={6} className="text-center">
+                                            {/*Image*/}
+                                            <Image
+                                                src={formData.avatar} // Hiển thị ảnh đại diện từ formData
+                                                alt="User Avatar"
+                                                roundedCircle
+                                                width={120}
+                                                height={120}
+                                            />
+                                            <Form.Group controlId="formAvatar">
+                                                <Form.Label>Ảnh đại diện</Form.Label>
+                                                <Form.Control type="file" accept="image/*" onChange={handleAvatarChange} />
+                                            </Form.Group>
+                                        </Col>
+                                        <Col xs={12} md={6}>
+                                            <Form.Group controlId="formUsername">
+                                                <Form.Label>Họ tên người dùng</Form.Label>
+                                                <Form.Control
+                                                    type="text"
+                                                    name="full_name"
+                                                    placeholder="Họ tên người dùng"
+                                                    value={formData.full_name}
+                                                    onChange={handleChange}
+                                                />
+                                            </Form.Group>
+                                        </Col>
+                                    </Row>
+
+                                    <Form.Group controlId="formPhone" className="mb-3">
+                                        <Form.Label>Số điện thoại</Form.Label>
+                                        <Form.Control
+                                            type="text"
+                                            name="phone_number"
+                                            placeholder="Số điện thoại"
+                                            value={formData.phone_number}
+                                            onChange={handleChange}
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="formAddress" className="mb-3">
+                                        <Form.Label>Địa chỉ giao hàng mặc định</Form.Label>
+                                        <Form.Control
+                                            type="text"
+                                            name="address"
+                                            placeholder="Địa chỉ giao hàng"
+                                            value={formData.address}
+                                            onChange={handleChange}
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="formEmail" className="mb-3">
+                                        <Form.Label>Email</Form.Label>
+                                        <Form.Control
+                                            type="text"
+                                            name="email"
+                                            placeholder="Email"
+                                            value={formData.email}
+                                            onChange={handleChange}
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="formPassword" className="mb-3">
+                                        <Form.Label>Password</Form.Label>
+                                        <Form.Control
+                                            type="password"
+                                            name="password"
+                                            placeholder="********"
+                                            value={formData.password}
+                                            onChange={handleChange}
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="formConfirmPassword" className="mb-3">
+                                        <Form.Label>Nhập lại Password</Form.Label>
+                                        <Form.Control
+                                            type="password"
+                                            name="confirmPassword"
+                                            placeholder="********"
+                                            value={formData.confirmPassword}
+                                            onChange={handleChange}
+                                        />
+                                    </Form.Group>
+
+                                    <Button variant="primary" type="submit" disabled={!isChanged}>
+                                        Cập nhật
+                                    </Button>
+                                </Form>
+                            </Card.Body>
+                        </Card>
+
+                    </Col>
+                </Row>
+
+
+            </Container>
+        )
+    } />
+}

frontend/src/pages/CartPage.js

@@ -12,29 +12,27 @@ export default function CartPage() {
         const cart = JSON.parse(DataStorage.get('cart')) || {};
 
         // Chuyển cart thành mảng chứa các món có số lượng > 0
-        const items = Object.entries(cart)
-            .filter(([name, amount]) => amount > 0)
-            .map(([name, amount]) => ({
-                name,
-                imageSrc: '/placeholder3.jpg',
-                price: 100, // Thêm đơn giá của món ăn (giả sử ở đây là 100 cho mỗi món)
-                amount
-            }));
-
+        const items = Object.entries(cart).map(([_, item]) => ({
+            name: item.name,
+            amount: item.amount,
+            imageSrc: item.imageSrc,
+            price: item.price
+          }));
+        
+        console.log(items);
         setCartItems(items);
     }, []);
 
-
     return (
         <BasicTemplate content={
             (
-                <Container className="d-flex align-items-center justify-content-center my-5" style={{ 'min-height': '70vh' }}>
+                <Container className="d-flex align-items-center justify-content-center my-5" style={{ minHeight: '70vh' }}>
                     {cartItems.length > 0 ? (
                         <div className="text-center">
                             <h2 className="text-center mb-4">Giỏ hàng của bạn</h2>
                             <Row className="g-3">
                                 {cartItems.map((item, idx) => (
-                                    <Col md={12} key={idx} className="my-3">
+                                    <Col md={12} key={idx} className="m-3">
                                         <Card className="shadow-sm" style={{ display: 'flex', flexDirection: 'row' }}>
                                             <Card.Img
                                                 variant="left"
@@ -42,22 +40,30 @@ export default function CartPage() {
                                                 style={{ width: '150px', objectFit: 'cover' }}
                                             />
                                             <Card.Body>
-                                                <Row xs={4} className="align-items-center justify-content-center">
-                                                    <Card.Title as='Col'>{item.name}</Card.Title>
-                                                    <Card.Text as='Col'>Đơn giá: {item.price} VND</Card.Text>
-                                                    <Card.Text as='Col'>Số lượng: {item.amount}</Card.Text>
-                                                    <Card.Text as='Col'>
-                                                        Tổng cộng: {item.price * item.amount} VND
-                                                    </Card.Text>
+                                                <Row xs={4} >
+                                                    <Col className="d-flex align-items-center justify-content-center">
+                                                    <Card.Title>{item.name}</Card.Title>
+                                                    </Col>
+                                                    <Col className="d-flex align-items-center justify-content-center">
+                                                    <Card.Text>Đơn giá: {item.price} VND</Card.Text>
+                                                    </Col>
+                                                    <Col className="d-flex align-items-center justify-content-center">
+                                                    <Card.Text>Số lượng: {item.amount}</Card.Text>
+                                                    </Col>
+                                                    <Col className="d-flex align-items-center justify-content-center">
+                                                    <Card.Text>Tổng cộng: {item.price * item.amount} VND</Card.Text>
+                                                    </Col>
                                                 </Row>
                                             </Card.Body>
                                         </Card>
                                     </Col>
                                 ))}
                             </Row>
-                            <Button as='a' href='/payment' className='my-3'>
+                            <Button as='a' href='/payment' className='m-3'>
                             Thanh toán
                             </Button>
+                            <Button as='a' href='/menu' className="m-3">
+                            Quay lại menu</Button>
                         </div>
                     ) : (
                         <div className="text-center">

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));
                 })
 
         }
@@ -63,11 +64,21 @@ export default function LoginPage() {
 
     return (
         <BasicTemplate content={
-            (<Container fluid className="d-flex justify-content-center mt-5">
-                <Row>
-                    <Col xs={1} md={2}></Col>
+            (<Container fluid className="d-flex justify-content-center align-items-center mt-5" 
+                style={{
+                    maxWidth: "100%",
+                    minHeight: "70vh",
+                    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',
+                }}>
+                <Row style={{maxWidth:"90vw"}}>
+                    {/* <Col xs={1} md={2}></Col> */}
                     <Col xs={10} md={8}>
-                        <Card style={{ width: '30rem' }} className='justify-content-center'>
+                        <Card style={{ width: '35vw' }} className='justify-content-center card-nospan'>
                             <Card.Header>
                                 <Card.Title className='mt-1 text-center'>Đăng nhập</Card.Title>
                             </Card.Header>
@@ -76,15 +87,15 @@ 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>
 
-                                    <Form.Group controlId="password" className='mb-3'>
+                                    <Form.Group controlId="password" className='mb-4'>
                                         <Form.Label>Mật khẩu</Form.Label>
                                         <Form.Control
                                             type="password"
@@ -92,10 +103,10 @@ export default function LoginPage() {
                                             onChange={(e) => setPassword(e.target.value)}
                                         />
                                     </Form.Group>
-                                    <div className='d-flex justify-content-between align-items-center'>
-                                        <a href="/register" className='me-2'>Đăng ký</a>
-                                        <Button type="submit" className='me-2'>Đăng nhập</Button>
-                                        <a href="/forgot-password" className='me-2'>Quên mật khẩu</a>
+                                    <div className='d-flex justify-content-center align-items-center'>
+                                        <Button as='a' variant='outline-primary' href="/register" className='m-2'>Đăng ký</Button>
+                                        <Button type="submit" className='m-2'>Đăng nhập</Button>
+                                        <Button as='a' variant='outline-primary' href="/forgot-password" className='m-2'>Quên mật khẩu</Button>
                                     </div>
 
                                 </Form>
@@ -103,7 +114,7 @@ export default function LoginPage() {
                         </Card>
 
                     </Col>
-                    <Col xs={1} md={2}></Col>
+                    {/* <Col xs={1} md={2}></Col> */}
                 </Row>
             </Container>)
         }>

frontend/src/pages/MenuPage.js

@@ -1,26 +1,43 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Modal, Button, Container, Row, Col, Tab, Tabs, Form, InputGroup } from 'react-bootstrap';
 import MenuItem from '../molecules/MenuItem';
 import BasicTemplate from '../templates/BasicTemplate';
 import DataStorage from '../organisms/DataStorage';
+import CacheStorage from '../organisms/CacheStorage';
+import axios from 'axios';
+
+const categoryMapper = [
+    { itemType: 1, category: 'Món chính' },
+    { itemType: 2, category: 'Đồ uống' },
+    { itemType: 3, category: 'Tráng miệng' },
+];
 
 function MenuPage() {
-    const [key, setKey] = useState('cat1');
+    const [key, setKey] = useState(0);
     const [selectedDish, setSelectedDish] = useState(null);
     const [show, setShow] = useState(false);
     const [cartAmount, setCartAmount] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [menuItems, setMenuItems] = useState({});
 
     function handleClose() {
         const cart = JSON.parse(DataStorage.get('cart')) || {};  // Đảm bảo cart không null
-        cart[selectedDish.name] = cartAmount;
-        const filteredCart = Object.fromEntries(
-            Object.entries(cart).filter(([key, value]) => value > 0)
-        );    
-        DataStorage.set('cart', JSON.stringify(filteredCart));
-        // console.log(JSON.stringify(filteredCart));
-        setShow(false);
-    }
 
+        cart[selectedDish.id] = {
+            'name':selectedDish.item_name,
+            'amount': cartAmount,
+            'imageSrc': selectedDish.image_url,
+            'price': selectedDish.price
+        };
+        for (let id in cart) {
+            if (cart[id].amount === 0) {
+                delete cart[id];
+            }
+            DataStorage.set('cart', JSON.stringify(cart));
+            // console.log(JSON.stringify(filteredCart));
+            setShow(false);
+        }
+    }
     function notLoggedInClose() {
         setShow(false);
     }
@@ -36,7 +53,7 @@ function MenuPage() {
             const cart = JSON.parse(DataStorage.get('cart')) || {};
 
             // Kiểm tra số lượng món ăn trong cart
-            const amount = cart[dish.name] !== undefined ? cart[dish.name] : 0;
+            const amount = cart[dish.id] !== undefined ? cart[dish.id] : 0;
             setCartAmount(amount);  // Cập nhật số lượng
             setShow(true);          // Hiển thị modal
         }
@@ -52,27 +69,35 @@ function MenuPage() {
         }
     }
 
-    const menuItems1 = [
-        { name: 'Món 1 thể loại 1', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
-        { name: 'Món 2 thể loại 1', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
-        { name: 'Món 3 thể loại 1', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
-    ];
-
-    const menuItems2 = [
-        { name: 'Món 1 thể loại 2', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
-        { name: 'Món 2 thể loại 2', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
-        { name: 'Món 3 thể loại 2', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
-        { name: 'Món 3 thể loại 2', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
-    ];
-
-    const menuItems3 = [
-        { name: 'Món 1 thể loại 3', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
-        { name: 'Món 2 thể loại 3', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
-        { name: 'Món 3 thể loại 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
-        { name: 'Món 4 thể loại 3', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
-        { name: 'Món 5 thể loại 3', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
-        { name: 'Món 6 thể loại 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
-    ];
+    useEffect(() => {
+        const fetchMenuItems = async () => {
+            try {
+                const menuItemsByType = {};
+
+                for (const item of categoryMapper) {
+                    // Gọi API để lấy món theo itemType
+                    const response = await axios.get(process.env.REACT_APP_API_URL + `/menu-items?filter.item_type=${item.itemType}`);
+                    // Lưu danh sách món theo itemType
+                    menuItemsByType[item.itemType] = response.data.data;
+                }
+                console.log(menuItemsByType);
+                setMenuItems(menuItemsByType);
+                setLoading(false);
+                CacheStorage.set('menuItems',JSON.stringify(menuItemsByType));
+            } catch (error) {
+                console.error('Error fetching menu items:', error);
+                setLoading(false);
+            }
+        };
+
+        if (CacheStorage.get('menuItems')) {
+            setMenuItems(JSON.parse(CacheStorage.get('menuItems')));
+            setLoading(false);
+        } else {
+            fetchMenuItems();
+        }
+
+    }, []);
 
     let modalContent;
 
@@ -86,37 +111,40 @@ function MenuPage() {
                     Vui lòng đăng nhập để xem chi tiết món và đặt hàng
                 </Modal.Body>
                 <Modal.Footer>
-                <Button variant="primary" as='a' href='/login'>
-                    Đăng nhập
-                </Button>
-                <Button variant="secondary" onClick={notLoggedInClose}>
-                    Đóng
-                </Button>
-            </Modal.Footer>
+                    <Button variant="primary" as='a' href='/login'>
+                        Đăng nhập
+                    </Button>
+                    <Button variant="secondary" onClick={notLoggedInClose}>
+                        Đóng
+                    </Button>
+                </Modal.Footer>
             </Modal>
         )
     }
     else {
         modalContent = (<Modal show={show} onHide={handleClose} className='text-center'>
             <Modal.Header closeButton className='text-center'>
-                <Modal.Title >{selectedDish?.name}</Modal.Title> {/* Dish name in the title */}
+                <Modal.Title >{selectedDish?.item_name}</Modal.Title> {/* Dish name in the title */}
             </Modal.Header>
             <Modal.Body>
-                <img src={selectedDish?.imageSrc} alt={selectedDish?.name} style={{ width: '100%' }} />  {/* Dish image */}
+                <img src={selectedDish?.image_url} alt={selectedDish?.item_name} style={{ width: '100%' }} />  {/* Dish image */}
                 <p>{selectedDish?.description}</p>  {/* Dish description */}
 
                 <Row className='mb-5'>
                     <Col md={2}></Col>
                     <Col md={8}>
                         <Form.Label>Số lượng</Form.Label>
-                        <InputGroup as='row' mb={4} className='mb-3'>
-                            <InputGroup.Text as='button' onClick={setDecrease}>-</InputGroup.Text>
-                            <Form.Control
-                                value={cartAmount}
-                                aria-label="Amount"
-                                onChange={(e) => setCartAmount(e.target.value)} />
-                            <InputGroup.Text as='button' onClick={setIncrease}>+</InputGroup.Text>
-                        </InputGroup></Col>
+                        <Row>
+                            <InputGroup mb={4} className='mb-3'>
+                                <InputGroup.Text as='button' onClick={setDecrease}>-</InputGroup.Text>
+                                <Form.Control
+                                    value={cartAmount}
+                                    aria-label="Amount"
+                                    onChange={(e) => setCartAmount(e.target.value)} />
+                                <InputGroup.Text as='button' onClick={setIncrease}>+</InputGroup.Text>
+                            </InputGroup>
+                        </Row>
+                    </Col>
                     <Col md={2}></Col>
                 </Row>
 
@@ -129,8 +157,41 @@ function MenuPage() {
         </Modal>);
     }
 
+    let menuContent;
+
+    if (loading) {
+        menuContent = (<p>Đang tải thực đơn...</p>);
+    } else {
+        menuContent = (<Tabs
+            id="controlled-tab-example"
+            activeKey={key}
+            onSelect={(k) => setKey(k)}
+            className="mb-3 custom-tab"
+        >
+            {categoryMapper.map((category, index) => (
+                <Tab eventKey={index} title={category.category}>
+                    <Container fluid className='my-5'>
+                        <Row md={3} className="g-4">
+                            {menuItems[category.itemType].map((item, idx) => (
+                                <Col key={item.id}>
+                                    <div onClick={() => handleShow(item)} className="text-center">
+                                        <MenuItem
+                                            dishName={item.item_name}
+                                            description={item.description}
+                                            imageSrc={item.image_url}
+                                        />
+                                    </div>
+                                </Col>
+                            ))}
+                        </Row>
+                    </Container>
+                </Tab>
+            ))}
+        </Tabs>);
+    }
+
     return <BasicTemplate content={(
-        <Container fluid className='my-5'>
+        <Container fluid className='my-5' style={{ minHeight: '70vh' }}>
             <>
                 {modalContent}
             </>
@@ -138,65 +199,7 @@ function MenuPage() {
             <Row>
                 <Col xs={1} md={2}></Col>
                 <Col xs={10} md={8}>
-                    <Tabs
-                        id="controlled-tab-example"
-                        activeKey={key}
-                        onSelect={(k) => setKey(k)}
-                        className="mb-3"
-                    >
-                        <Tab eventKey="cat1" title="Thể loại 1">
-                            <Container fluid className='my-5'>
-                                <Row md={3} className="g-4">
-                                    {menuItems1.map((item, idx) => (
-                                        <Col key={idx} >
-                                            <div onClick={() => handleShow(item)}>
-                                                <MenuItem
-                                                    dishName={item.name}
-                                                    description={item.description}
-                                                    imageSrc={item.imageSrc}
-                                                />
-                                            </div>
-
-                                        </Col>
-                                    ))}
-                                </Row>
-                            </Container>
-                        </Tab>
-                        <Tab eventKey="cat2" title="Thể loại 2">
-                            <Container fluid className='my-5'>
-                                <Row md={3} className="g-4">
-                                    {menuItems2.map((item, idx) => (
-                                        <Col key={idx}>
-                                            <div onClick={() => handleShow(item)}>
-                                                <MenuItem
-                                                    dishName={item.name}
-                                                    description={item.description}
-                                                    imageSrc={item.imageSrc}
-                                                />
-                                            </div>
-                                        </Col>
-                                    ))}
-                                </Row>
-                            </Container>
-                        </Tab>
-                        <Tab eventKey="cat3" title="Thể loại 3">
-                            <Container fluid className='my-5'>
-                                <Row md={3} className="g-4">
-                                    {menuItems3.map((item, idx) => (
-                                        <Col key={idx}>
-                                            <div onClick={() => handleShow(item)}>
-                                                <MenuItem
-                                                    dishName={item.name}
-                                                    description={item.description}
-                                                    imageSrc={item.imageSrc}
-                                                />
-                                            </div>
-                                        </Col>
-                                    ))}
-                                </Row>
-                            </Container>
-                        </Tab>
-                    </Tabs>
+                    {menuContent}
                 </Col>
                 <Col xs={1} md={2}></Col>
             </Row>

frontend/src/pages/NewsPage.js

@@ -1,12 +1,22 @@
 import {Container, Row, Col} from "react-bootstrap";
 import BasicTemplate from "../templates/BasicTemplate";
+import { useSearchParams } from 'react-router-dom';
+import CacheStorage from "../organisms/CacheStorage";
 
-export default function NewsPage({newsTitle, newsContent, newsImageSrc}) {
+export default function NewsPage() {
     
-    newsTitle = "This is a demo newstitle"
-    newsContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-    newsImageSrc = "/placeholder3.jpg"
+    
+    const [searchParams] = useSearchParams();
+    const newsId = Number(searchParams.get('id')); 
+    
+    const feedDetail = Array.from(JSON.parse(CacheStorage.get('feeds'))).filter((item) => item.id === newsId);
 
+    
+
+    const newsTitle = feedDetail[0].title;
+    const newsContent = feedDetail[0].description;
+    const newsImageSrc = feedDetail[0].image_url;
+    
     return (
         <BasicTemplate content={
             (<Container id="about-us" className="my-5">

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,18 +35,61 @@ 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('/');
         }
     };
 
     return (
         <BasicTemplate content={
-            (<Container fluid className="d-flex justify-content-center mt-5">
-                <Row>
-                    <Col xs={1} md={2}></Col>
+            (<Container fluid className="d-flex justify-content-center align-items-center mt-5" 
+                style={{
+                    maxWidth: "100%",
+                    minHeight: "70vh",
+                    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',
+                }}>
+                <Row style={{maxWidth:"90vw"}}>
+                    {/* <Col xs={1} md={2}></Col> */}
                     <Col xs={10} md={8}>
-                        <Card style={{ width: '30rem' }} className='justify-content-center'>
+                        <Card style={{ width: '35vw' }} className='d-flex justify-content-center card-nospan'>
                             <Card.Header>
                                 <Card.Title className='mt-1 text-center'>Đăng ký</Card.Title>
                             </Card.Header>
@@ -57,7 +105,7 @@ const RegisterPage = () => {
                                             type="text"
                                             placeholder="Họ và tên"
                                             onChange={(e) => setFullname(e.target.value)}
-                                            
+
                                         />
                                     </Form.Group>
 
@@ -68,7 +116,7 @@ const RegisterPage = () => {
                                             type="text"
                                             placeholder="Số điện thoại"
                                             onChange={(e) => setPhoneNumber(e.target.value)}
-                                            
+
                                         />
                                     </Form.Group>
 
@@ -79,7 +127,7 @@ const RegisterPage = () => {
                                             type="text"
                                             placeholder="Email"
                                             onChange={(e) => setEmail(e.target.value)}
-                                            
+
                                         />
                                     </Form.Group>
 
@@ -90,24 +138,24 @@ const RegisterPage = () => {
                                             type="password"
                                             placeholder="Nhập mật khẩu"
                                             onChange={(e) => setPassword(e.target.value)}
-                                            
+
                                         />
                                     </Form.Group>
 
-                                    <Form.Group controlId="confirm_password" className='mb-3'>
+                                    <Form.Group controlId="confirm_password" className='mb-5'>
                                         <Form.Label>Xác nhận mật khẩu</Form.Label>
                                         <Form.Control
                                             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'>
-                                        <Button variant="primary" type="submit" className='me-2'>
+                                    <div className='d-flex justify-content-center align-items-center text-center'>
+                                        <Button variant="primary" type="submit" className='mx-4'>
                                             Đăng ký
                                         </Button>
-                                        <a href="/login" className='me-2'>Đăng nhập</a>
+                                        <Button as='a' variant='outline-primary' href="/login" className='mx-4'>Đăng nhập</Button>
 
                                     </div>
 
@@ -116,7 +164,7 @@ const RegisterPage = () => {
                         </Card>
 
                     </Col>
-                    <Col xs={1} md={2}></Col>
+                    {/* <Col xs={1} md={2}></Col> */}
                 </Row>
             </Container>
             )

frontend/src/styles/styles.css

@@ -0,0 +1,247 @@
+/* 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;
+    --text-color-disabled: #706161;
+    /* Màu chữ chính */
+    --container-background-color: rgba(44, 41, 41, 0.5);
+    --fading-background-color: linear-gradient(to bottom,
+            rgba(0, 0, 0, 0) 0%,
+            /* Bắt đầu trong suốt */
+            rgba(44, 41, 41, 0.8) 30%,
+            /* Đậm dần */
+            rgba(44, 41, 41, 0.8) 70%,
+            /* Vùng màu đậm */
+            rgba(0, 0, 0, 0) 100%
+            /* Trở lại trong suốt */
+        );
+    --card-background-color: rgba(65, 52, 53, 0.8);
+    --modal-background-color: rgb(32, 29, 29);
+}
+
+/* Đặt nền cho toàn bộ trang */
+body {
+    color: var(--text-color);
+    background-image: linear-gradient(rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.95)), 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: 95% auto;
+    /* Để 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(--fading-background-color);
+}
+
+.custom-tab .nav-link {
+    background-color: var(--primary-color);
+    /* Màu nền cho các nút tab không được chọn */
+    color: var(--text-color);
+    /* Màu chữ cho các nút tab không được chọn */
+}
+
+.custom-tab .nav-link.active {
+    background-color: var(--secondary-color);
+    /* Màu nền cho tab đang được chọn */
+    color: var(--text-color);
+    /* Màu chữ cho tab đang được chọn */
+}
+
+.custom-tab .nav-link:hover {
+    background-color: var(--card-background-color);
+    /* Màu nền cho tab khi hover */
+    color: var(--text-color);
+    /* Màu chữ khi hover */
+}
+
+/* Navbar */
+.navbar {
+    background-color: var(--primary-color) !important;
+    font-size: 1.1rem;
+}
+
+.navbar-brand,
+.nav-link {
+    color: #fff !important;
+    font-weight: normal;
+    transition: color 0.3s;
+}
+
+.nav-link.disabled {
+    color: var(--text-color-disabled) !important;
+}
+
+.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;
+    min-width: 7vw;
+}
+
+.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: rgba(from var(--background-color) r g b, 0.8);
+    /* Màu nền trắng */
+    color: var(--text-color);
+    /* Màu chữ đỏ */
+    font-weight: bold;
+    border-color: var(--secondary-color);
+    /* Màu viền đỏ */
+    min-width: 7vw;
+}
+
+.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 {
+    background-color: var(--card-background-color);
+    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(--text-color);
+}
+
+.card-text {
+    color: var(--text-color);
+}
+
+.card-body {
+    min-height: 150px;
+}
+
+.card-footer {
+    background-color: #fff;
+    border-top: none;
+    text-align: center;
+}
+
+.card-nospan:hover {
+    transform: scale(1.00);
+}
+
+/* Container cho các phần */
+.menu-section {
+    padding: 40px 0;
+    background-color: #fff;
+}
+
+.form-label {
+    color: var(--text-color);
+}
+
+a {
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+a:hover {
+    color: orange;
+    /* Màu sắc khi di chuột qua */
+}
+
+/* Khi liên kết được nhấn */
+a:active {
+    color: red;
+    /* Màu sắc khi nhấn */
+}
+
+/* Khi liên kết đã được truy cập */
+
+.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;
+}
+
+.modal-content {
+    background-color: var(--modal-background-color);
+}

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;

frontend/test.json

@@ -0,0 +1,182 @@
+[
+    {
+        "id": "xoixomai",
+        "item_name": "Xôi xoài",
+        "image_url": "https://cdn.mediamart.vn/images/news/mo-lam-xoi-xoai-thai-lan-thom-beo-hp-dn-chun-huong-v_2107a3bc.jpg",
+        "item_type": 3,
+        "description": "Xôi xoài thái thơm ngon với nước cốt dừa",
+        "price": 35000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "trada",
+        "item_name": "Trà đá",
+        "image_url": "https://media-cdn-v2.laodong.vn/Storage/NewsPortal/2019/7/25/746291/Tra-Da.jpg",
+        "item_type": 2,
+        "description": "Trà đá giải khát, thích hợp cho mọi món ăn",
+        "price": 5000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "trachanh",
+        "item_name": "Trà chanh",
+        "image_url": "https://www.bartender.edu.vn/wp-content/uploads/2020/07/cach-pha-tra-chanh-khong-bi-dang.jpg",
+        "item_type": 2,
+        "description": "Trà chanh tươi mát với chút vị chua dịu",
+        "price": 10000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "suongsaohate",
+        "item_name": "Sương sáo hạt é",
+        "image_url": "https://dacsannanggio.vn/image/catalog/Hat-e/cach-lam-suong-sao-hat-e.jpg",
+        "item_type": 3,
+        "description": "Món tráng miệng thanh mát với sương sáo và hạt é",
+        "price": 15000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "sinhtoxoai",
+        "item_name": "Sinh tố xoài",
+        "image_url": "https://beptruong.edu.vn/wp-content/uploads/2016/02/sinh-to-xoai-sua-tuoi.jpg",
+        "item_type": 2,
+        "description": "Sinh tố xoài chua ngọt tự nhiên",
+        "price": 30000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "sinhtobo",
+        "item_name": "Sinh tố bơ",
+        "image_url": "https://caygiongbo.com/datafiles/3/2019-02-24/99271623-sinh-to-bo-de-quoc-bao-lau-trong-tu-lanh-1.jpg",
+        "item_type": 2,
+        "description": "Sinh tố bơ béo ngậy và thơm ngon",
+        "price": 30000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "pho",
+        "item_name": "Phở bò",
+        "image_url": "https://cdn.tgdd.vn/Files/2017/03/18/962092/an-lien-3-bat-pho-voi-cong-thuc-nau-pho-nay-202201261419401397.jpg",
+        "item_type": 1,
+        "description": "Món phở truyền thống với nước dùng thanh ngọt",
+        "price": 35000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "pepsi",
+        "item_name": "Pepsi",
+        "image_url": "https://t4.ftcdn.net/jpg/02/84/65/61/360_F_284656175_G6SlGTBVl4pg8oXh6jr86cOmKUZjfrym.jpg",
+        "item_type": 2,
+        "description": "Nước ngọt Pepsi",
+        "price": 20000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "nuocsam",
+        "item_name": "Nước sâm",
+        "image_url": "https://assets.gia-hanoi.com/nau-nuoc-sam-bi-dao.jpg",
+        "item_type": 2,
+        "description": "Nước sâm mát lạnh, tốt cho sức khỏe",
+        "price": 15000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "nuocepduoi",
+        "item_name": "Nước ép ổi",
+        "image_url": "https://douongnhapkhau.com/wp-content/uploads/2024/08/nuoc-ep-oi-co-tac-dung-gi-cach-lam-nuoc-ep-oi-2.jpg",
+        "item_type": 2,
+        "description": "Nước ép ổi thơm ngon, giàu vitamin C",
+        "price": 25000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "nuocdua",
+        "item_name": "Nước dừa",
+        "image_url": "https://storage-vnportal.vnpt.vn/ndh-ubnd/5893/1223/uong-nuoc-dua.jpg",
+        "item_type": 2,
+        "description": "Nước dừa tươi, mát và bổ dưỡng",
+        "price": 25000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "nuoccam",
+        "item_name": "Nước cam",
+        "image_url": "https://baodongnai.com.vn/file/e7837c02876411cd0187645a2551379f/022024/174_mh_20240228114325.jpg",
+        "item_type": 2,
+        "description": "Nước cam tươi, cung cấp vitamin C",
+        "price": 25000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "miquang",
+        "item_name": "Mì Quảng",
+        "image_url": "https://helenrecipes.com/wp-content/uploads/2021/05/Screenshot-2021-05-31-142423-1200x675.png",
+        "item_type": 1,
+        "description": "Mì Quảng đặc sản với nước dùng đậm đà",
+        "price": 28000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "kemdua",
+        "item_name": "Kem dừa",
+        "image_url": "https://cdn.tgdd.vn/Files/2020/03/25/1244397/cach-lam-kem-dua-thom-ngon-tai-nha-bang-may-xay-sinh-to-202003250909366047.jpg",
+        "item_type": 3,
+        "description": "Kem dừa mát lạnh với hương dừa tự nhiên",
+        "price": 30000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "goicuon",
+        "item_name": "Gỏi cuốn",
+        "image_url": "https://khaihoanphuquoc.com.vn/wp-content/uploads/2023/11/nu%CC%9Bo%CC%9B%CC%81c-ma%CC%86%CC%81m-cha%CC%82%CC%81m-go%CC%89i-cuo%CC%82%CC%81n-1200x923.png",
+        "item_type": 1,
+        "description": "Cuốn tươi ngon với rau, tôm, thịt và bún",
+        "price": 15000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "comtam",
+        "item_name": "Cơm tấm",
+        "image_url": "https://static.vinwonders.com/production/com-tam-da-nang-1.jpg",
+        "item_type": 1,
+        "description": "Cơm tấm sườn, bì, chả truyền thống",
+        "price": 35000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "comchien",
+        "item_name": "Cơm chiên dương châu",
+        "image_url": "https://nineshield.com.vn/wp-content/uploads/2024/03/com-chien-duong-chau-ngon.jpg",
+        "item_type": 1,
+        "description": "Cơm chiên với trứng, tôm, thịt nguội và rau củ",
+        "price": 35000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "cocacola",
+        "item_name": "Coca-Cola",
+        "image_url": "https://t4.ftcdn.net/jpg/02/84/65/61/360_F_284656117_sPF8gVWaX627bq5qKrlrvCz1eFfowdBf.jpg",
+        "item_type": 2,
+        "description": "Nước ngọt Coca-Cola",
+        "price": 20000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "chethotnot",
+        "item_name": "Chè thốt nốt",
+        "image_url": "https://i.vietgiaitri.com/2022/6/19/cach-nau-che-thot-not-thanh-mat-don-gian-tai-nha-5c0-6500541.jpg",
+        "item_type": 3,
+        "description": "Chè thốt nốt tươi mát và bổ dưỡng",
+        "price": 18000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    },
+    {
+        "id": "chekhucbach",
+        "item_name": "Chè khúc bạch",
+        "image_url": "https://cdn.tgdd.vn/2021/10/CookDishThumb/che-khuc-bach-la-gi-che-khuc-bach-lam-tu-gi-nguyen-lieu-lam-thumb-620x620.jpg",
+        "item_type": 3,
+        "description": "Chè khúc bạch thơm béo với hạnh nhân và trái cây",
+        "price": 30000,
+        "create_at": "2024-11-02T13:42:02.009Z"
+    }
+]