CategoryManagement

+ ; + + ) +} diff --git a/src/pages/admin/category-management/components/FormAdd.tsx b/src/pages/admin/category-management/components/FormAdd.tsx new file mode 100644 index 0000000..4740bcc --- /dev/null +++ b/src/pages/admin/category-management/components/FormAdd.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +export default function FormAdd() { + return ( +

+ FormAdd +

+ ) +} diff --git a/src/pages/admin/category-management/iconData.ts b/src/pages/admin/category-management/iconData.ts new file mode 100644 index 0000000..e6730b7 --- /dev/null +++ b/src/pages/admin/category-management/iconData.ts @@ -0,0 +1,182 @@ +export const IconData = [ + "fa-classic fa-solid fa-house ", + "fa-classic fa-solid fa-circle-user ", + "fa-classic fa-solid fa-image ", + "fa-classic fa-solid fa-file ", + "fa-classic fa-solid fa-camera ", + "fa-classic fa-solid fa-calendar ", + "fa-classic fa-solid fa-cloud ", + "fa-classic fa-solid fa-alarm-clock ", + "fa-classic fa-solid fa-truck ", + "fa-classic fa-solid fa-thumbs-up ", + "fa-classic fa-solid fa-face-smile ", + "fa-classic fa-solid fa-headphones ", + "fa-classic fa-solid fa-bell ", + "fa-classic fa-solid fa-user ", + "fa-classic fa-solid fa-comment ", + "fa-classic fa-solid fa-envelope ", + "fa-classic fa-solid fa-globe ", + "fa-classic fa-solid fa-trophy ", + "fa-classic fa-solid fa-eye ", + "fa-classic fa-solid fa-inbox ", + "fa-classic fa-solid fa-print ", + "fa-classic fa-solid fa-suitcase ", + "fa-classic fa-solid fa-volume ", + "fa-classic fa-solid fa-magnifying-glass ", + "fa-classic fa-solid fa-check ", + "fa-classic fa-solid fa-download ", + "fa-classic fa-solid fa-font-awesome ", + "fa-classic fa-solid fa-web-awesome ", + "fa-classic fa-solid fa-phone ", + "fa-classic fa-solid fa-bars ", + "fa-classic fa-solid fa-star ", + "fa-classic fa-solid fa-location-dot ", + "fa-classic fa-solid fa-music ", + "fa-classic fa-solid fa-wand-magic-sparkles ", + "fa-classic fa-solid fa-face-awesome ", + "fa-classic fa-solid fa-heart ", + "fa-classic fa-solid fa-arrow-right ", + "fa-classic fa-solid fa-circle-xmark ", + "fa-classic fa-solid fa-bomb ", + "fa-classic fa-solid fa-poo ", + "fa-classic fa-solid fa-camera-retro ", + "fa-classic fa-solid fa-xmark ", + "fa-classic fa-solid fa-caret-up ", + "fa-classic fa-solid fa-truck-fast ", + "fa-classic fa-solid fa-pen-nib ", + "fa-classic fa-solid fa-arrow-up ", + "fa-classic fa-solid fa-hippo ", + "fa-classic fa-solid fa-calendar-days ", + "fa-classic fa-solid fa-paperclip ", + "fa-classic fa-solid fa-shield-halved ", + "fa-classic fa-solid fa-cart-shopping ", + "fa-classic fa-solid fa-clipboard ", + "fa-classic fa-solid fa-filter ", + "fa-classic fa-solid fa-circle-info ", + "fa-classic fa-solid fa-arrow-up-from-bracket ", + "fa-classic fa-solid fa-bolt ", + "fa-classic fa-solid fa-raygun ", + "fa-classic fa-solid fa-car ", + "fa-classic fa-solid fa-ghost ", + "fa-classic fa-solid fa-mug-hot ", + "fa-classic fa-solid fa-rocket-launch ", + "fa-classic fa-solid fa-pen ", + "fa-classic fa-solid fa-umbrella ", + "fa-classic fa-solid fa-gift ", + "fa-classic fa-solid fa-film ", + "fa-classic fa-solid fa-grid-2 ", + "fa-classic fa-solid fa-list ", + "fa-classic fa-solid fa-gear ", + "fa-classic fa-solid fa-trash ", + "fa-classic fa-solid fa-circle-up ", + "fa-classic fa-solid fa-circle-down ", + "fa-classic fa-solid fa-rotate-right ", + "fa-classic fa-solid fa-sparkles ", + "fa-classic fa-solid fa-lock ", + "fa-classic fa-solid fa-barcode ", + "fa-classic fa-solid fa-tag ", + "fa-classic fa-solid fa-book ", + "fa-classic fa-solid fa-bookmark ", + "fa-classic fa-solid fa-font ", + "fa-classic fa-solid fa-video ", + "fa-classic fa-solid fa-circle-half-stroke ", + "fa-classic fa-solid fa-droplet ", + "fa-classic fa-solid fa-pen-to-square ", + "fa-classic fa-solid fa-share-from-square ", + "fa-classic fa-solid fa-plus ", + "fa-classic fa-solid fa-minus ", + "fa-classic fa-solid fa-share ", + "fa-classic fa-solid fa-circle-exclamation ", + "fa-classic fa-solid fa-fire ", + "fa-classic fa-solid fa-eye-slash ", + "fa-classic fa-solid fa-plane ", + "fa-classic fa-solid fa-magnet ", + "fa-classic fa-solid fa-hand ", + "fa-classic fa-solid fa-folder ", + "fa-classic fa-solid fa-folder-open ", + "fa-classic fa-solid fa-money-bill ", + "fa-classic fa-solid fa-thumbs-down ", + "fa-classic fa-solid fa-comments ", + "fa-classic fa-solid fa-grill-hot ", + "fa-classic fa-solid fa-lemon ", + "fa-classic fa-solid fa-key ", + "fa-classic fa-solid fa-thumbtack ", + "fa-classic fa-solid fa-gears ", + "fa-classic fa-solid fa-paper-plane ", + "fa-classic fa-solid fa-code ", + "fa-classic fa-solid fa-text ", + "fa-classic fa-solid fa-arrow-down-to-line ", + "fa-classic fa-solid fa-city ", + "fa-classic fa-solid fa-ticket ", + "fa-classic fa-solid fa-tree ", + "fa-classic fa-solid fa-wifi ", + "fa-classic fa-solid fa-window ", + "fa-classic fa-solid fa-burger-soda ", + "fa-classic fa-solid fa-camera-movie ", + "fa-classic fa-solid fa-paint-roller ", + "fa-classic fa-solid fa-bicycle ", + "fa-classic fa-solid fa-sliders ", + "fa-classic fa-solid fa-brush ", + "fa-classic fa-solid fa-hashtag ", + "fa-classic fa-solid fa-megaphone ", + "fa-classic fa-solid fa-flask ", + "fa-classic fa-solid fa-briefcase ", + "fa-classic fa-solid fa-compass ", + "fa-classic fa-solid fa-dumpster-fire ", + "fa-classic fa-solid fa-person ", + "fa-classic fa-solid fa-person-dress ", + "fa-classic fa-solid fa-balloons ", + "fa-classic fa-solid fa-address-book ", + "fa-classic fa-solid fa-bath ", + "fa-classic fa-solid fa-handshake ", + "fa-classic fa-solid fa-snowflake ", + "fa-classic fa-solid fa-right-to-bracket ", + "fa-classic fa-solid fa-earth-americas ", + "fa-classic fa-solid fa-cloud-arrow-up ", + "fa-classic fa-solid fa-binoculars ", + "fa-classic fa-solid fa-palette ", + "fa-classic fa-solid fa-layer-group ", + "fa-classic fa-solid fa-brackets-curly ", + "fa-classic fa-solid fa-users ", + "fa-classic fa-solid fa-gamepad ", + "fa-classic fa-solid fa-business-time ", + "fa-classic fa-solid fa-feather ", + "fa-classic fa-solid fa-sun ", + "fa-classic fa-solid fa-computer-classic ", + "fa-classic fa-solid fa-link ", + "fa-classic fa-solid fa-pen-fancy ", + "fa-classic fa-solid fa-badge-check ", + "fa-classic fa-solid fa-fish ", + "fa-classic fa-solid fa-joystick ", + "fa-classic fa-solid fa-play-pause ", + "fa-classic fa-solid fa-bug ", + "fa-classic fa-solid fa-shop ", + "fa-classic fa-solid fa-mug-saucer ", + "fa-classic fa-solid fa-planet-ringed ", + "fa-classic fa-solid fa-landmark ", + "fa-classic fa-solid fa-campfire ", + "fa-classic fa-solid fa-poo-storm ", + "fa-classic fa-solid fa-chart-simple ", + "fa-classic fa-solid fa-shirt ", + "fa-classic fa-solid fa-files ", + "fa-classic fa-solid fa-dolphin ", + "fa-classic fa-solid fa-anchor ", + "fa-classic fa-solid fa-quote-left ", + "fa-classic fa-solid fa-atom-simple ", + "fa-classic fa-solid fa-bag-shopping ", + "fa-classic fa-solid fa-bed-front ", + "fa-classic fa-solid fa-people-simple ", + "fa-classic fa-solid fa-gauge ", + "fa-classic fa-solid fa-signal-bars ", + "fa-classic fa-solid fa-code-compare ", + "fa-classic fa-solid fa-user-secret ", + "fa-classic fa-solid fa-stethoscope ", + "fa-classic fa-solid fa-car-side ", + "fa-classic fa-solid fa-hand-holding-heart ", + "fa-classic fa-solid fa-ufo ", + "fa-classic fa-solid fa-alien-8bit ", + "fa-classic fa-solid fa-block-question ", + "fa-classic fa-solid fa-aperture ", + "fa-classic fa-solid fa-bird ", + "fa-classic fa-solid fa-strawberry " +] \ No newline at end of file diff --git a/src/pages/admin/components/Header.tsx b/src/pages/admin/components/Header.tsx new file mode 100644 index 0000000..74cca34 --- /dev/null +++ b/src/pages/admin/components/Header.tsx @@ -0,0 +1,39 @@ +import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'; +import { Button, Layout, theme } from 'antd'; +import { useTranslation } from 'react-i18next'; +const { Header } = Layout; + +export default function HeaderCom({ collapsed, setCollapsed }: { collapsed: boolean, setCollapsed: any }) { + const { + token: { colorBgContainer }, + } = theme.useToken(); + const { t,i18n } = useTranslation() + return ( +

+ +

+ ) +} diff --git a/src/pages/admin/components/Slider.tsx b/src/pages/admin/components/Slider.tsx new file mode 100644 index 0000000..bcb1bd8 --- /dev/null +++ b/src/pages/admin/components/Slider.tsx @@ -0,0 +1,45 @@ +import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons' +import { Menu } from 'antd' +import Sider from 'antd/es/layout/Sider' +import { useTranslation } from 'react-i18next' +import { useNavigate } from 'react-router' + +export default function Slider({ collapsed }: { collapsed: boolean }) { + + const { t } = useTranslation() + const navigate = useNavigate() + + return ( + +

+ , + label: t("Quản lý người dùng"), + }, + { + key: 'category', + icon: , + label: t('category-management'), + }, + { + key: 'product', + icon: , + label: t('product-management'), + }, + + ]} + onClick={(e) => { + navigate(e.key) + }} + /> + + ) +} diff --git a/src/pages/admin/product-management/ProductManagement.tsx b/src/pages/admin/product-management/ProductManagement.tsx new file mode 100644 index 0000000..e8da3bb --- /dev/null +++ b/src/pages/admin/product-management/ProductManagement.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +export default function ProductManagement() { + return ( +

+ ProductManagement +

+ ) +} diff --git a/src/pages/admin/user-management/UserManagement.tsx b/src/pages/admin/user-management/UserManagement.tsx new file mode 100644 index 0000000..d646485 --- /dev/null +++ b/src/pages/admin/user-management/UserManagement.tsx @@ -0,0 +1,103 @@ +import React, { useEffect, useState } from 'react' +import { UserRole, type User } from '../../../interfaces/user.interface' +import { useTranslation } from 'react-i18next'; +import { Button, Space, Table } from 'antd'; + +export default function UserManagement() { + const { t } = useTranslation() + const [userList, setUserList] = useState(JSON.parse(localStorage.getItem("userList") || "[]")) + + const columns = [ + { + title: t('user-id'), + dataIndex: 'id', + key: 'id', + }, + { + title: t('fullname'), + dataIndex: 'fullName', + key: 'fullName', + }, + { + title: t('age'), + dataIndex: 'age', + key: 'age', + }, + { + title: t('phone-number'), + dataIndex: 'phone', + key: 'phone', + }, + { + title: t('username'), + dataIndex: 'userName', + key: 'userName', + }, + { + title: t('email'), + dataIndex: 'email', + key: 'email', + }, + { + title: t('role'), + dataIndex: 'role', + key: 'role', + }, + { + title: t('active'), + key: 'isActive', + render: (_: any, record: User) => ( + + { + record.role != UserRole.ADMIN && (record.isActive ? + : + ) + } + + ), + }, + { + title: t('tools'), + key: 'tools', + render: (_: any, record: User) => ( + + + + ), + }, + ]; + + useEffect(() => { + localStorage.setItem("userList", JSON.stringify(userList)) + }, [userList]) + return ( +

{t("user-management")}

{ + return (userB.role == UserRole.ADMIN ? 1 : 0) - (userA.role == UserRole.ADMIN ? 1 : 0) + })} columns={columns} />; + + ) +} diff --git a/src/pages/user/Collection/CollectionDetail.tsx b/src/pages/user/Collection/CollectionDetail.tsx new file mode 100644 index 0000000..68aa024 --- /dev/null +++ b/src/pages/user/Collection/CollectionDetail.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import { useParams } from 'react-router' + +export default function CollectionDetail() { + const {slugCollection} = useParams() + return ( +

+ Collection = {slugCollection} +

+ ) +} diff --git a/src/pages/user/Home/About/About.tsx b/src/pages/user/Home/About/About.tsx new file mode 100644 index 0000000..ccb1667 --- /dev/null +++ b/src/pages/user/Home/About/About.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +export default function About() { + return ( +

+ Về Chúng Tôi +

+ ) +} diff --git a/src/pages/user/Home/Home.tsx b/src/pages/user/Home/Home.tsx new file mode 100644 index 0000000..717d591 --- /dev/null +++ b/src/pages/user/Home/Home.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import HomeHeader from './components/HomeHeader' +import HomeFooter from './components/HomeFooter' +import './home.scss' +import HomeBanner from './components/HomeBanner' +import { Outlet } from 'react-router' +export default function Home() { + return ( +

+ + +

+ +

+ ) +} diff --git a/src/pages/user/Home/components/HomeBanner.tsx b/src/pages/user/Home/components/HomeBanner.tsx new file mode 100644 index 0000000..182846e --- /dev/null +++ b/src/pages/user/Home/components/HomeBanner.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import banner from '../../../../assets/img/banner.png' +export default function HomeBanner() { + return ( +

+ ) +} diff --git a/src/pages/user/Home/components/HomeFooter.tsx b/src/pages/user/Home/components/HomeFooter.tsx new file mode 100644 index 0000000..0c9bea9 --- /dev/null +++ b/src/pages/user/Home/components/HomeFooter.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +export default function HomeFooter() { + return ( + + ) +} diff --git a/src/pages/user/Home/components/HomeHeader.scss b/src/pages/user/Home/components/HomeHeader.scss new file mode 100644 index 0000000..72f4549 --- /dev/null +++ b/src/pages/user/Home/components/HomeHeader.scss @@ -0,0 +1,124 @@ +header { + background-color: white; + position: sticky; + top: 0; + + .content { + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + + img { + height: 60px; + } + + .menu-btn { + color: red; + cursor: pointer; + font-size: 20px; + } + + .media_box { + height: 100%; + display: flex; + align-items: center; + + .item { + display: flex; + align-items: center; + font-size: 10px; + cursor: pointer; + + position: relative; + + i { + font-size: 2em; + color: red; + margin-right: 5px; + } + + &:last-child { + i { + margin-right: 12px; + } + } + + .text_box { + font-size: 1.5em; + color: red; + + p { + &:first-child {} + + &:last-child {} + } + } + + .cart_count { + position: absolute; + top: 0; + left: 30%; + width: 1.5em; + height: 1.5em; + font-size: 1em; + background-color: yellow; + color: black; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + border: 1px solid red; + } + + } + } + + .user_box { + width: 100px; + height: 100%; + display: flex; + align-items: center; + + .login {} + + .unlogin { + height: 100%; + display: flex; + align-items: center; + .unlogin-content { + background-color: rgba(220, 218, 218, 0.612); + padding: 2px; + display: flex; + align-items: center; + font-size: 10px; + cursor: pointer; + border-radius: 5px; + + i { + font-size: 2em; + color: red; + margin-right: 5px; + } + + &:last-child { + i { + margin-right: 12px; + } + } + + .text_box { + font-size: 1.5em; + color: red; + + p { + &:first-child {} + + &:last-child {} + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/pages/user/Home/components/HomeHeader.tsx b/src/pages/user/Home/components/HomeHeader.tsx new file mode 100644 index 0000000..9eacb0b --- /dev/null +++ b/src/pages/user/Home/components/HomeHeader.tsx @@ -0,0 +1,83 @@ +import React, { useState } from 'react' +import './HomeHeader.scss' +import logo from '../../../../assets/img/logo.png' +import Search from 'antd/es/input/Search' +import { useNavigate } from 'react-router' +export default function HomeHeader() { + const [isLogin, setIsLogin] = useState(false) + const navigate = useNavigate() + const menu = [ + { + iconClass: "fa-solid fa-headphones", + text: ["Hotline", "1900.5301"], + path: "/hotline" + }, + { + iconClass: "fa-solid fa-location-dot", + text: ["Hệ thống", "Showroom"], + path: "/about" + }, + { + iconClass: "fa-solid fa-clipboard", + text: ["Tra cứu", "Đơn hàng"], + path: "/order-history" + } + ] + return ( +

+ { + navigate("/") + }} src={logo} /> + + +

+ { + menu.map((item) => { + return ( +

{ + navigate(item.path) + }} className='item'> + +

{item.text[0]}

{item.text[1]}

+ ) + }) + } +

+ +

Giỏ

Hàng

+ { + isLogin ? ( +

+ +

+ ) : ( +

+ +

Đăng

Nhập

+ ) + } + + +

+ ) +} diff --git a/src/pages/user/Home/home.scss b/src/pages/user/Home/home.scss new file mode 100644 index 0000000..d325034 --- /dev/null +++ b/src/pages/user/Home/home.scss @@ -0,0 +1,54 @@ +$widthContent: 1080px; + +.home_page { + .home_banner { + width: 100%; + display: flex; + justify-content: center; + background-color: #C30100; + .content { + width: $widthContent; + } + + height: 60px; + } + + header { + width: 100%; + display: flex; + justify-content: center; + + .content { + width: $widthContent; + } + + height: 60px; + + border-bottom: 1px solid black; + } + + .container { + width: 100%; + display: flex; + justify-content: center; + + .content { + width: $widthContent; + } + + height: calc(100vh - 60px); + } + + footer { + width: 100%; + height: 120px; + display: flex; + justify-content: center; + + .content { + width: $widthContent; + } + + background-color: yellow; + } +} \ No newline at end of file diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..3dd7168 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2022", + "useDefineForClassFields": false, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": false, + "noUnusedLocals": false, + "noUnusedParameters": false, + "erasableSyntaxOnly": false, + "noFallthroughCasesInSwitch": false, + "noUncheckedSideEffectImports": false + }, + "include": ["src"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1ffef60 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..640a275 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2023", + "lib": ["ES2023"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": false, + "noUnusedLocals": false, + "noUnusedParameters": false, + "erasableSyntaxOnly": false, + "noFallthroughCasesInSwitch": false, + "noUncheckedSideEffectImports": false + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..2328e17 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react-swc' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +})

Create Account

{t('sign-in')}

{t('welcome-back')}

{t('hello-friend')}

CategoryManagement