Update: add api menu&feed

frontend/src/index.js

@@ -20,6 +20,8 @@ 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([
     {
@@ -56,7 +58,7 @@ const router = createBrowserRouter([
         element: <UserInfoPage />,
         errorElement: <ErrorPage />
     },
-
+// admin section
     {
         path: "/admin",
         element: <AdminSummaryPage />,
@@ -91,6 +93,16 @@ const router = createBrowserRouter([
         path: "/admin-orders",
         element: <AdminOrderPage />,
         errorElement: <ErrorPage />
+    },
+    {
+        path: "/admin-login",
+        element: <AdminLoginPage />,
+        errorElement: <ErrorPage />
+    },
+    {
+        path:"/admin-info",
+        element: <AdminUserInfoPage/>,
+        errorElement: <ErrorPage/>
     }
 ]);
 

frontend/src/molecules/AdminNavBar.js

@@ -22,7 +22,7 @@ export default function AdminNavbar() {
     if (isLoggedIn === 'true') {
         userContent = <>
             <Stack direction='horizontal' gap={2}>
-                <Button href="/userinfo" variant='primary'>
+                <Button href="/admin-info" variant='primary'>
                     Xin chào, ADMIN {username}
                 </Button>
                 <Button onClick={handleLogout} variant='outline-primary'>
@@ -31,7 +31,13 @@ export default function AdminNavbar() {
             </Stack>
         </>
     } else {
-        userContent = <></>
+        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' >
@@ -50,12 +56,12 @@ export default function AdminNavbar() {
                 <Navbar.Collapse id="basic-navbar-nav">
                     <Nav className="me-auto text-center">
                         {/* These are the navigators */}
-                        <Nav.Link href="/admin-summary">Dashboard</Nav.Link>
-                        <Nav.Link href="/admin-feed">Quản lý bài đăng</Nav.Link>
-                        <Nav.Link href="/admin-menu">Quản lý thực đơn</Nav.Link>
-                        <Nav.Link href="/admin-staff">Quản lý nhân viên</Nav.Link>
-                        <Nav.Link href="/admin-schedule">Lịch làm việc</Nav.Link>
-                        <Nav.Link href="/admin-orders">Danh sách đơn hàng</Nav.Link>
+                        <Nav.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>

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' style={{'min-height':'6vh'}}>
-            <Container fluid style={{maxWidth:"90%"}}>
+        <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 fluid id="menu" className="text-center justify-content-center align-items-center my-5" style={{maxWidth:"90%"}}>
-      <h1 className='mb-5'>Menu</h1>
-      <Carousel activeIndex={index} onSelect={handleSelect} data-bs-theme="dark">
-        {Array.from({ length: countCarouselSlides }).map((_, slideIndex) => (
-          <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 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 fluid id="store" className="text-center justify-content-center align-items-center my-5" style={{maxWidth:"90%"}}>
+        <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 fluid>
-                        <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

@@ -2,10 +2,11 @@ import { Container, Row, Col } from "react-bootstrap";
 import AdminTemplate from "../templates/AdminTemplate";
 
 export default function AdminFeedPage() {
+
     return (
         <AdminTemplate content={
             (
-                <Container className='d-flex text-center align-items-center justify-content-center' style={{ 'min-height': '80vh' }}>
+                <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>

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

@@ -1,11 +1,11 @@
-import { Container, Row, Col } from "react-bootstrap";
+import { Container, Row, Col } from 'react-bootstrap';
 import AdminTemplate from "../templates/AdminTemplate";
 
 export default function AdminMenuPage() {
     return (
         <AdminTemplate content={
             (
-                <Container className='d-flex text-center align-items-center justify-content-center' style={{ 'min-height': '80vh' }}>
+                <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>

frontend/src/pages/AdminOrderPage.js

@@ -5,7 +5,7 @@ export default function AdminOrderPage() {
     return (
         <AdminTemplate content={
             (
-                <Container className='d-flex text-center align-items-center justify-content-center' style={{ 'min-height': '80vh' }}>
+                <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>

frontend/src/pages/AdminSchedulePage.js

@@ -5,7 +5,7 @@ export default function AdminSchedulePage() {
     return (
         <AdminTemplate content={
             (
-                <Container className='d-flex text-center align-items-center justify-content-center' style={{ 'min-height': '80vh' }}>
+                <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>

frontend/src/pages/AdminStaffPage.js

@@ -5,7 +5,7 @@ export default function AdminStaffPage() {
     return (
         <AdminTemplate content={
             (
-                <Container className='d-flex text-center align-items-center justify-content-center' style={{ 'min-height': '80vh' }}>
+                <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>

frontend/src/pages/AdminSummaryPage.js

@@ -1,11 +1,23 @@
 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={{ 'min-height': '80vh' }}>
+                <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>

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

@@ -64,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>
@@ -85,7 +95,7 @@ export default function LoginPage() {
                                         />
                                     </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"
@@ -93,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>
@@ -104,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

@@ -75,11 +75,21 @@ const RegisterPage = () => {
 
     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>
@@ -132,7 +142,7 @@ const RegisterPage = () => {
                                         />
                                     </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"
@@ -141,11 +151,11 @@ const RegisterPage = () => {
 
                                         />
                                     </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>
 
@@ -154,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

@@ -7,29 +7,67 @@
     --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);
-    background-color: var(--background-color);
+    --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: url('../../public/header.jpg'); */
-    background-color: var(--background-color); /* Màu nền */
+    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: cover; /* Để hình ảnh phủ đầy toàn bộ trang */
-    background-repeat: no-repeat; /* Để hình ảnh không lặp lại */
-    background-attachment: fixed; /* Để nền cố định khi cuộn trang */
-    background-position: center; /* Căn giữa hình ảnh */
-  }
-  
+    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(--container-background-color);
+    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 */
@@ -41,10 +79,14 @@ body {
 .navbar-brand,
 .nav-link {
     color: #fff !important;
-    font-weight: bold;
+    font-weight: normal;
     transition: color 0.3s;
 }
 
+.nav-link.disabled {
+    color: var(--text-color-disabled) !important;
+}
+
 .nav-link:hover {
     color: var(--secondary-color) !important;
 }
@@ -64,6 +106,7 @@ body {
     color: #fff;
     font-weight: bold;
     transition: background-color 0.3s, color 0.3s;
+    min-width: 7vw;
 }
 
 .btn-primary:hover {
@@ -84,13 +127,14 @@ body {
 
 /* Style cho nút secondary */
 .btn-outline-primary {
-    background-color: var(--text-color);
+    background-color: rgba(from var(--background-color) r g b, 0.8);
     /* Màu nền trắng */
-    color: var(--primary-color);
+    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 {
@@ -102,10 +146,9 @@ body {
     /* 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);
@@ -127,25 +170,55 @@ body {
 .card-title {
     font-size: 1.25rem;
     font-weight: bold;
-    color: var(--primary-color);
+    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');
@@ -167,4 +240,8 @@ body {
     max-width: 600px;
     margin: auto;
     color: #f1f1f1;
+}
+
+.modal-content {
+    background-color: var(--modal-background-color);
 }

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"
+    }
+]