react_admin_layout

2025-10-08 07:05:50 +07:00
commit 7645838eb8
38 changed files with 7908 additions and 0 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+import RouterSetup from './RouterSetup'
+
+export default function App() {
+  
+  return (
+      <RouterSetup />
+  )
+}
--- a/src/RouterSetup.tsx
+++ b/src/RouterSetup.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Route, Routes } from 'react-router'
+import Home from './pages/home/Home'
+import Admin from './pages/admin/Admin'
+import ProtectedAdmin from './pages/admin/auth/ProtectedAdmin'
+import Auth from './pages/home/auth/Auth'
+import UserManagement from './pages/admin/User/UserManagement'
+
+export default function RouterSetup() {
+  return <Routes>
+    <Route path='/' element={<Home/>}></Route>
+    <Route path='/auth' element={<Auth/>}></Route>
+    <Route path='admin' element={
+      <ProtectedAdmin>
+        <Admin/>
+      </ProtectedAdmin>
+    }>
+      <Route path='user' element={<UserManagement/>}></Route>
+
+    </Route>
+  </Routes>
+}
--- a/src/apis/core/user.api.ts
+++ b/src/apis/core/user.api.ts
@@ -0,0 +1,110 @@
+import axios from "axios"
+import type { User } from "../../types/user.type"
+import { message } from "antd"
+import { ApiUtil } from "../../utils/api.util"
+
+export interface UserSignInDTO {
+    emailOrUserName: string
+    password: string
+}
+
+export interface UserFindAllDTO {
+    _page?: number,
+    _per_page?: number,
+    userName?: string,
+    role?: string
+}
+
+export const UserApi = {
+    signIn: async (data: UserSignInDTO): Promise<{
+        message: string
+        data: any
+    }> => {
+        let userData = await axios.get(`${import.meta.env.VITE_SV_HOST}/users?email=${data.emailOrUserName}`)
+        if (userData.data.length == 0) {
+            userData = await axios.get(`${import.meta.env.VITE_SV_HOST}/users?userName=${data.emailOrUserName}`)
+        }
+        if (userData.data.length == 0) {
+            throw ({
+                message: "Không tìm thấy người dùng tương ứng, bạn vui lòng kiểm tra lại!",
+                data: null
+            });
+        } else {
+            if (userData.data[0].password != data.password) {
+                throw ({
+                    message: "Mật khẩu không chính xác!",
+                    data: null
+                })
+            }
+            return {
+                message: "Đăng nhập thành công!",
+                data: userData.data[0] as User
+            }
+        }
+    },
+    signUp: async (data: User) => {
+        let userNameExistedRes = await axios.get(`${import.meta.env.VITE_SV_HOST}/users?userName=${data.userName}`)
+        if (userNameExistedRes.data.length > 0) {
+            throw ({
+                mes: "Tên đăng nhập đã tồn tại"
+            })
+        }
+        let emailExistedRes = await axios.get(`${import.meta.env.VITE_SV_HOST}/users?email=${data.email}`)
+        if (emailExistedRes.data.length > 0) {
+            throw ({
+                mes: "Email đã tồn tại"
+            })
+        }
+        let newUserRes = await axios.post(`${import.meta.env.VITE_SV_HOST}/users`, data)
+        return newUserRes.data
+    },
+    findByUserName: async (userName: string) => {
+        let userData = await axios.get(`${import.meta.env.VITE_SV_HOST}/users?userName=${userName}`)
+
+        if (userData.data.length > 0) {
+            return {
+                message: "Tìm thấy 1 người dùng",
+                data: userData.data[0]
+            }
+        } else {
+            throw ({
+                message: "Không tìm thấy người dùng nào",
+                data: null
+            })
+        }
+    },
+    findByEmail: async (email: string) => {
+        let userData = await axios.get(`${import.meta.env.VITE_SV_HOST}/users?email=${email}`)
+
+        if (userData.data.length > 0) {
+            return {
+                message: "Tìm thấy 1 người dùng",
+                data: userData.data[0]
+            }
+        } else {
+            throw ({
+                message: "Không tìm thấy người dùng nào",
+                data: null
+            })
+        }
+    },
+    findById: async (id: string) => {
+        let userData = await axios.get(`${import.meta.env.VITE_SV_HOST}/users/${id}`)
+
+        if (userData.data) {
+            return {
+                message: "Tìm thấy 1 người dùng",
+                data: userData.data
+            }
+        } else {
+            throw ({
+                message: "Không tìm thấy người dùng nào",
+                data: null
+            })
+        }
+    },
+    findAll: async (query?: UserFindAllDTO) => {
+        let result = await axios.get(`${import.meta.env.VITE_SV_HOST}/users?` + ApiUtil.writeQuery(query))
+        return result.data
+    }
+}
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -0,0 +1,5 @@
+import { UserApi } from "./core/user.api";
+
+export const Apis = {
+    user: UserApi
+}
--- a/src/assets/img/logo.png
+++ b/src/assets/img/logo.png
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/main.css
+++ b/src/main.css
@@ -0,0 +1 @@
+@import "tailwindcss";
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,14 @@
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import { BrowserRouter } from 'react-router'
+import './main.css'
+import '@ant-design/v5-patch-for-react-19';
+import { Provider } from 'react-redux';
+import { store } from './stores/index.ts';
+createRoot(document.getElementById('root')!).render(
+    <BrowserRouter>
+      <Provider store={store}>
+         <App />
+      </Provider>
+    </BrowserRouter>
+)
--- a/src/pages/admin/Admin.tsx
+++ b/src/pages/admin/Admin.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { Layout, theme } from 'antd';
+import Slider from './components/Slider';
+import HeaderCom from './components/Header';
+import { Outlet } from 'react-router';
+
+const { Content } = Layout;
+
+export const Admin: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const {
+        token: { colorBgContainer, borderRadiusLG },
+    } = theme.useToken();
+
+    return (
+        <Layout>
+            <Slider collapsed={collapsed} />
+            <Layout>
+                <HeaderCom collapsed={collapsed} setCollapsed={setCollapsed} />
+                <Content
+                    style={{
+                        margin: '24px 16px',
+                        padding: 24,
+                        minHeight: 280,
+                        background: colorBgContainer,
+                        borderRadius: borderRadiusLG,
+                    }}
+                >
+                    <Outlet/>
+                </Content>
+            </Layout>
+        </Layout>
+    );
+};
+
+export default Admin
--- a/src/pages/admin/User/UserManagement.tsx
+++ b/src/pages/admin/User/UserManagement.tsx
@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from 'react'
+import { Apis } from '../../../apis'
+import { UserRole, type User } from '../../../types/user.type'
+import { Pagination, Table } from 'antd'
+import Search, { type SearchProps } from 'antd/es/input/Search'
+import type { UserFindAllDTO } from '../../../apis/core/user.api'
+
+
+interface PaginnationType {
+    fist: number,
+    items: number,
+    last: number,
+    next: number,
+    pages: number,
+    prev: number
+}
+interface UserFetchResDTO extends PaginnationType {
+    data: User[]
+}
+
+export default function UserManagement() {
+    const params = new URLSearchParams(location.search);
+
+    const maxItem = 1;
+    const [curPage, setCurPage] = useState(+params.get('curPage') || 1)
+    const [userList, setUserList] = useState<User[]>([])
+    const [pagination, setPagination] = useState<PaginnationType | null>(null)
+    const [search, setSearch] = useState("")
+    const [role, setRole] = useState("")
+
+    const queryParams = new URLSearchParams();
+    queryParams.set('curPage', String(1))
+    
+    useEffect(() => {
+        fetchUserList()
+        const queryParams = new URLSearchParams();
+        if (curPage) {
+            queryParams.set('curPage', String(curPage))
+        }
+    }, [curPage, search, role])
+
+    useEffect(() => {
+        fetchUserList()
+    }, [])
+
+    /* Antd Table */
+    const columns = [
+        {
+            title: 'Mã Người Dùng',
+            dataIndex: 'id',
+            key: 'id',
+        },
+        {
+            title: 'Tên đăng nhập',
+            dataIndex: 'userName',
+            key: 'userName',
+        },
+        {
+            title: 'Vai Trò',
+            dataIndex: 'role',
+            key: 'role',
+        },
+        {
+            title: 'Tên Hiển Thị',
+            dataIndex: 'displayName',
+            key: 'displayName',
+        },
+        {
+            title: 'Email',
+            dataIndex: 'email',
+            key: 'email',
+        },
+        {
+            title: 'Số điện thoại',
+            dataIndex: 'phoneNumber',
+            key: 'phoneNumber',
+        },
+        {
+            title: 'Trạng thái',
+            key: 'status',
+        }
+    ];
+
+
+    /* search */
+    const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
+        setSearch(value)
+    };
+
+    async function fetchUserList() {
+        try {
+            let query: UserFindAllDTO = {
+                _page: curPage,
+                _per_page: maxItem,
+            }
+
+            if (search) {
+                query.userName = search
+            }
+
+            if (role) {
+                query.role = role
+            }
+
+            let userRes = await Apis.user.findAll(query) as UserFetchResDTO
+            setUserList(userRes.data)
+            setPagination(userRes)
+        } catch (err) {
+
+        }
+    }
+    return (
+        <div>
+            <h1>Quản Lý Người Dùng</h1>
+            <Search placeholder="input search text" onSearch={onSearch} enterButton />
+            <select onChange={(e) => {
+                setRole(e.target.value)
+            }}>
+                <option value={""}>Chọn role</option>
+                {
+                    Object.entries(UserRole).map(item => {
+                        return (
+                            <option value={item[0]}>{item[1]}</option>
+                        )
+                    })
+                }
+            </select>
+            <Table
+                dataSource={userList}
+                columns={columns}
+                pagination={{
+                    pageSize: maxItem,
+                    total: pagination?.pages || 0,
+                    onChange: (curPage, maxItem) => {
+                        console.log("curPage", curPage, "maxItem", maxItem)
+                        setCurPage(curPage)
+                    }
+                }}
+
+            />
+        </div>
+    )
+}
--- a/src/pages/admin/auth/ProtectedAdmin.tsx
+++ b/src/pages/admin/auth/ProtectedAdmin.tsx
@@ -0,0 +1,121 @@
+import { message, Modal } from 'antd';
+import React, { type FormEvent, type ReactNode } from 'react'
+import { UserApi, type UserSignInDTO } from '../../../apis/core/user.api';
+import { Apis } from '../../../apis';
+import { UserRole, type User } from '../../../types/user.type';
+import { useSelector } from 'react-redux';
+import type { StoreType } from '../../../stores';
+
+export default function ProtectedAdmin(
+    { children }: {
+        children: ReactNode;
+    }) {
+    const userStore = useSelector((store: StoreType) => {
+        return store.user
+    })
+
+
+    if (userStore.data?.role == UserRole.MASTER || userStore.data?.role == UserRole.ADMIN) {
+        return (
+            <>
+                {children}
+            </>
+        )
+    }
+
+    if (!userStore.data?.role) {
+        return (
+            <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-4">
+                <div className="w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden">
+                    {/* Header */}
+                    <div className="p-6 text-center border-b border-gray-200">
+                        <h1 className="text-2xl font-bold text-slate-800">Rikkei Phone Store</h1>
+                        <p className="text-gray-500 text-sm mt-1">Chào mừng bạn quay trở lại 👋</p>
+                    </div>
+
+                    {/* Form */}
+                    <div className="p-6">
+                        <form onSubmit={(e) => {
+                            signInHandle(e)
+                        }} className="space-y-5">
+                            {/* Email */}
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700">
+                                    Email của bạn
+                                </label>
+                                <input
+                                    name='emailOrUserName'
+                                    type="text"
+                                    className="mt-1 w-full rounded-xl border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                    placeholder="admin@example.com"
+                                />
+                            </div>
+
+                            {/* Password */}
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700">
+                                    Mật khẩu của bạn
+                                </label>
+                                <input
+                                    name="password"
+                                    type="password"
+                                    className="mt-1 w-full rounded-xl border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                    placeholder="••••••••"
+                                />
+                            </div>
+
+                            {/* Remember me + Forgot */}
+                            <div className="flex items-center justify-between text-sm">
+                                <a href="#" className="text-blue-600 hover:underline">
+                                    Quên mật khẩu?
+                                </a>
+                            </div>
+
+                            {/* Submit */}
+                            <button
+                                type="submit"
+                                className="cursor-pointer w-full py-2 rounded-xl bg-blue-600 text-white font-semibold shadow-md hover:bg-blue-700 transition"
+                            >
+                                Đăng nhập
+                            </button>
+                        </form>
+                    </div>
+
+                    {/* Footer */}
+                    <div className="p-4 bg-gray-50 text-center text-sm text-gray-500">
+                        © 2025 Rikkei Admin
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    if (userStore.data?.role) {
+        window.location.href="/"
+        return <></>
+    }
+
+    async function signInHandle(e: FormEvent) {
+        e.preventDefault()
+        let data: UserSignInDTO = {
+            emailOrUserName: (e.target as any).emailOrUserName.value,
+            password: (e.target as any).password.value,
+        }
+        try {
+            let result = await Apis.user.signIn(data)
+            localStorage.setItem("userLogin", JSON.stringify(result.data))
+            Modal.confirm({
+                title: "Đăng nhập thành công",
+                content: result.message,
+                onOk: () => {
+                    window.location.reload()
+                },
+                onCancel: () => {
+                    window.location.reload()
+                }
+            })
+        } catch (err) {
+            message.error(err.message)
+        }
+    }
+}
--- a/src/pages/admin/components/Header.tsx
+++ b/src/pages/admin/components/Header.tsx
@@ -0,0 +1,36 @@
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Button, Layout, theme } from 'antd';
+const { Header } = Layout;
+
+export default function HeaderCom({ collapsed, setCollapsed }: { collapsed: boolean, setCollapsed: any }) {
+    const {
+        token: { colorBgContainer },
+    } = theme.useToken();
+    return (
+        <Header style={{ padding: 0, background: colorBgContainer }}>
+            <Button
+                type="text"
+                icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+                onClick={() => setCollapsed(!collapsed)}
+                style={{
+                    fontSize: '16px',
+                    width: 64,
+                    height: 64,
+                }}
+            />
+
+            <select onChange={(e) => {
+                localStorage.setItem("lng", e.target.value)
+            }}>
+                <option value="vi">Tiếng Việt</option>
+                <option value="en">Tiếng Anh</option>
+                <option value="ja">Tiếng Nhật</option>
+            </select>
+
+            <Button onClick={() => {
+                localStorage.removeItem("userLogin")
+                window.location.reload()
+            }}>logout</Button>
+        </Header>
+    )
+}
--- a/src/pages/admin/components/Slider.tsx
+++ b/src/pages/admin/components/Slider.tsx
@@ -0,0 +1,35 @@
+import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons'
+import { Menu } from 'antd'
+import Sider from 'antd/es/layout/Sider'
+import type { ItemType, MenuItemType } from 'antd/es/menu/interface'
+import { useNavigate } from 'react-router'
+
+export default function Slider({ collapsed }: { collapsed: boolean }) {
+
+  const navigate = useNavigate()
+
+  let menuItem: ItemType<MenuItemType>[] = [
+    {
+      key: 'user',
+      icon: <UserOutlined />,
+      label: "Quản lý người dùng",
+    }
+  ]
+
+  return (
+    <Sider style={{
+      height: "100vh"
+    }} trigger={null} collapsible collapsed={collapsed}>
+      <div className="demo-logo-vertical" />
+      <Menu
+        theme="dark"
+        mode="inline"
+        defaultSelectedKeys={['1']}
+        items={menuItem}
+        onClick={(e) => {
+          navigate(e.key)
+        }}
+      />
+    </Sider>
+  )
+}
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -0,0 +1,24 @@
+import React, { useContext } from 'react'
+import { Link, Outlet } from 'react-router'
+import type { User } from '../../types/user.type'
+import './home.scss'
+import Header from './components/Header/Header'
+import Footer from './components/Footer/Footer'
+
+export default function Home() {
+  return (
+    <div className='home_page'>
+      {/* Header */}
+      <Header/>
+      {/* Body */}
+      <div id='container'>  
+        <div className='content'>
+            <Outlet/>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <Footer />
+    </div>
+  )
+}
--- a/src/pages/home/auth/Auth.tsx
+++ b/src/pages/home/auth/Auth.tsx
@@ -0,0 +1,162 @@
+import React, { useEffect, useRef, type FormEvent } from 'react'
+import './auth.scss'
+import { UserRole, UserStatus, type User } from '../../../types/user.type'
+import { Apis } from '../../../apis'
+import { message, Modal } from 'antd'
+import { FormUtil } from '../../../utils/form.util'
+import type { UserSignInDTO } from '../../../apis/core/user.api'
+import { useSelector } from 'react-redux'
+import type { StoreType } from '../../../stores'
+export default function Auth() {
+    const containerRef = useRef(null)
+
+
+    async function handleSignup(e: FormEvent) {
+        e.preventDefault()
+
+        try {
+            let newUser = {
+                id: String(Date.now()),
+                userName: (e.target as any).userName.value,
+                password: (e.target as any).password.value,
+                role: UserRole.USER,
+                displayName: (e.target as any).displayName.value,
+                email: (e.target as any).email.value,
+                phoneNumber: (e.target as any).phoneNumber.value,
+                status: UserStatus.ACTIVE,
+                banReason: ""
+            }
+            let newUserResult = (await Apis.user.signUp(newUser)) as User
+            Modal.confirm({
+                title: "Thông báo",
+                content: `Bạn đã đăng ký thành công với tên đăng nhập là: ${newUserResult.userName}, id của bạn là: ${newUserResult.id}`,
+                onOk: () => {
+                    FormUtil.resetForm(e)
+                    containerRef.current.classList.remove("right-panel-active");
+                }
+            })
+        } catch (err) {
+            message.error(err.mes)
+        }
+    }
+
+    async function handleSignin(e: FormEvent) {
+        e.preventDefault()
+        let loginData: UserSignInDTO = {
+            emailOrUserName: (e.target as any).emailOrUserName.value,
+            password: (e.target as any).password.value
+        }
+        console.log("loginData", loginData)
+        try {
+            let data = await Apis.user.signIn(loginData)
+            localStorage.setItem("userLogin", data.data.id)
+            Modal.confirm({
+                title: `Chào mừng ${data.data.userName} đã quay trở lại`,
+                content: ``,
+                onOk: () => {
+                    window.location.href = "/"
+                },
+                onCancel: () => {
+                    window.location.href = "/"
+                }
+            })
+        } catch (err) {
+            message.error(err.message)
+        }
+    }
+
+    const userStore = useSelector((store: StoreType) => {
+        return store.user
+    })
+
+    useEffect(() => {
+        if (!userStore.loading && userStore.data) {
+            window.location.href = "/"
+        }
+    }, [userStore.data, userStore.loading])
+
+    return (
+        <>
+            {
+                userStore.data ? <>Đã đăng nhập</> : (
+                    <div className='auth_page'>
+                        <div ref={containerRef} className="container" id="container">
+                            {/* Form Đăng Ký */}
+                            <div className="form-container sign-up-container">
+                                <form onSubmit={(e) => {
+                                    handleSignup(e)
+                                }}>
+                                    <h1>Tạo tài khoản</h1>
+                                    <div className="social-container">
+                                        <a href="#" className="social">
+                                            <i className="fab fa-facebook-f" />
+                                        </a>
+                                        <a href="#" className="social">
+                                            <i className="fab fa-google-plus-g" />
+                                        </a>
+                                        <a href="#" className="social">
+                                            <i className="fab fa-linkedin-in" />
+                                        </a>
+                                    </div>
+                                    <input type="text" placeholder="userName" name='userName' />
+                                    <input type="password" placeholder="Password" name='password' />
+                                    <input type="text" placeholder="displayName" name='displayName' />
+                                    <input type="email" placeholder="email" name='email' />
+                                    <input type="text" placeholder="phoneNumber" name='phoneNumber' />
+                                    <button className='cursor-pointer'>Đăng Ký</button>
+                                </form>
+                            </div>
+                            {/* Form Đăng Nhập */}
+                            <div className="form-container sign-in-container">
+                                <form onSubmit={(e) => {
+                                    handleSignin(e)
+                                }}>
+                                    <h1>Sign in</h1>
+                                    <div className="social-container">
+                                        <a href="#" className="social">
+                                            <i className="fab fa-facebook-f" />
+                                        </a>
+                                        <a href="#" className="social">
+                                            <i className="fab fa-google-plus-g" />
+                                        </a>
+                                        <a href="#" className="social">
+                                            <i className="fab fa-linkedin-in" />
+                                        </a>
+                                    </div>
+                                    <span>or use your account</span>
+                                    <input type="text" placeholder="Email or Username" name='emailOrUserName' />
+                                    <input type="password" placeholder="Password" name='password' />
+                                    <a href="#">Forgot your password?</a>
+                                    <button>Sign In</button>
+                                </form>
+                            </div>
+                            {/* Control */}
+                            <div className="overlay-container">
+                                <div className="overlay">
+                                    <div className="overlay-panel overlay-left">
+                                        <h1>Welcome Back!</h1>
+                                        <p>To keep connected with us please login with your personal info</p>
+                                        <button onClick={() => {
+                                            containerRef.current.classList.remove("right-panel-active");
+                                        }} className="ghost" id="signIn">
+                                            Sign In
+                                        </button>
+                                    </div>
+                                    <div className="overlay-panel overlay-right">
+                                        <h1>Hello, Friend!</h1>
+                                        <p>Enter your personal details and start journey with us</p>
+                                        <button onClick={() => {
+                                            containerRef.current.classList.add("right-panel-active")
+                                        }} className="ghost" id="signUp">
+                                            Sign Up
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )
+            }
+        </>
+    )
+}
--- a/src/pages/home/auth/auth.scss
+++ b/src/pages/home/auth/auth.scss
@@ -0,0 +1,254 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
+
+* {
+	box-sizing: border-box;
+}
+
+.auth_page {
+	background: #f6f5f7;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	font-family: 'Montserrat', sans-serif;
+	height: 100vh;
+	margin: -20px 0 50px;
+
+	h1 {
+		font-weight: bold;
+		margin: 0;
+	}
+
+	h2 {
+		text-align: center;
+	}
+
+	p {
+		font-size: 14px;
+		font-weight: 100;
+		line-height: 20px;
+		letter-spacing: 0.5px;
+		margin: 20px 0 30px;
+	}
+
+	span {
+		font-size: 12px;
+	}
+
+	a {
+		color: #333;
+		font-size: 14px;
+		text-decoration: none;
+		margin: 15px 0;
+	}
+
+	button {
+		border-radius: 20px;
+		border: 1px solid #FF4B2B;
+		background-color: #FF4B2B;
+		color: #FFFFFF;
+		font-size: 12px;
+		font-weight: bold;
+		padding: 12px 45px;
+		letter-spacing: 1px;
+		text-transform: uppercase;
+		transition: transform 80ms ease-in;
+	}
+
+	button:active {
+		transform: scale(0.95);
+	}
+
+	button:focus {
+		outline: none;
+	}
+
+	button.ghost {
+		background-color: transparent;
+		border-color: #FFFFFF;
+	}
+
+	form {
+		background-color: #FFFFFF;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		padding: 0 50px;
+		height: 100%;
+		text-align: center;
+	}
+
+	input {
+		background-color: #eee;
+		border: none;
+		padding: 12px 15px;
+		margin: 8px 0;
+		width: 100%;
+	}
+
+	.container {
+		background-color: #fff;
+		border-radius: 10px;
+		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
+			0 10px 10px rgba(0, 0, 0, 0.22);
+		position: relative;
+		overflow: hidden;
+		width: 768px;
+		max-width: 100%;
+		min-height: 480px;
+	}
+
+	.form-container {
+		position: absolute;
+		top: 0;
+		height: 100%;
+		transition: all 0.6s ease-in-out;
+	}
+
+	.sign-in-container {
+		left: 0;
+		width: 50%;
+		z-index: 2;
+	}
+
+	.container.right-panel-active .sign-in-container {
+		transform: translateX(100%);
+	}
+
+	.sign-up-container {
+		left: 0;
+		width: 50%;
+		opacity: 0;
+		z-index: 1;
+	}
+
+	.container.right-panel-active .sign-up-container {
+		transform: translateX(100%);
+		opacity: 1;
+		z-index: 5;
+		animation: show 0.6s;
+	}
+
+	@keyframes show {
+
+		0%,
+		49.99% {
+			opacity: 0;
+			z-index: 1;
+		}
+
+		50%,
+		100% {
+			opacity: 1;
+			z-index: 5;
+		}
+	}
+
+	.overlay-container {
+		position: absolute;
+		top: 0;
+		left: 50%;
+		width: 50%;
+		height: 100%;
+		overflow: hidden;
+		transition: transform 0.6s ease-in-out;
+		z-index: 100;
+	}
+
+	.container.right-panel-active .overlay-container {
+		transform: translateX(-100%);
+	}
+
+	.overlay {
+		background: #FF416C;
+		background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
+		background: linear-gradient(to right, #FF4B2B, #FF416C);
+		background-repeat: no-repeat;
+		background-size: cover;
+		background-position: 0 0;
+		color: #FFFFFF;
+		position: relative;
+		left: -100%;
+		height: 100%;
+		width: 200%;
+		transform: translateX(0);
+		transition: transform 0.6s ease-in-out;
+	}
+
+	.container.right-panel-active .overlay {
+		transform: translateX(50%);
+	}
+
+	.overlay-panel {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		padding: 0 40px;
+		text-align: center;
+		top: 0;
+		height: 100%;
+		width: 50%;
+		transform: translateX(0);
+		transition: transform 0.6s ease-in-out;
+	}
+
+	.overlay-left {
+		transform: translateX(-20%);
+	}
+
+	.container.right-panel-active .overlay-left {
+		transform: translateX(0);
+	}
+
+	.overlay-right {
+		right: 0;
+		transform: translateX(0);
+	}
+
+	.container.right-panel-active .overlay-right {
+		transform: translateX(20%);
+	}
+
+	.social-container {
+		margin: 20px 0;
+	}
+
+	.social-container a {
+		border: 1px solid #DDDDDD;
+		border-radius: 50%;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		margin: 0 5px;
+		height: 40px;
+		width: 40px;
+	}
+
+	footer {
+		background-color: #222;
+		color: #fff;
+		font-size: 14px;
+		bottom: 0;
+		position: fixed;
+		left: 0;
+		right: 0;
+		text-align: center;
+		z-index: 999;
+	}
+
+	footer p {
+		margin: 10px 0;
+	}
+
+	footer i {
+		color: red;
+	}
+
+	footer a {
+		color: #3c97bf;
+		text-decoration: none;
+	}
+}
--- a/src/pages/home/components/Footer/Footer.tsx
+++ b/src/pages/home/components/Footer/Footer.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default function Footer() {
+    return (
+        <footer>
+            <div className='content'>
+                Footer
+            </div>
+        </footer>
+    )
+}
--- a/src/pages/home/components/Header/Header.tsx
+++ b/src/pages/home/components/Header/Header.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from 'react'
+import { UserRole, type User } from '../../../../types/user.type'
+import './header.scss'
+import { useNavigate } from 'react-router'
+import logo from '../../../../assets/img/logo.png'
+import Search from 'antd/es/input/Search'
+import { useSelector } from 'react-redux'
+import type { StoreType } from '../../../../stores'
+export default function Header() {
+    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"
+        }
+    ]
+    const userStore = useSelector((store: StoreType) => {
+        return store.user
+    })
+    return (
+        <header>
+            <div className='content'>
+                <img onClick={() => {
+                    navigate("/")
+                }} src={logo} />
+                <i className="fa-solid fa-bars menu-btn"></i>
+                <Search placeholder="input search text" style={{ width: 200 }} />
+                <div className='media_box'>
+                    {
+                        menu.map((item) => {
+                            return (
+                                <div onClick={() => {
+                                    navigate(item.path)
+                                }} className='item'>
+                                    <i className={item.iconClass}></i>
+                                    <div className='text_box'>
+                                        <p>{item.text[0]}</p>
+                                        <p>{item.text[1]}</p>
+                                    </div>
+                                </div>
+                            )
+                        })
+                    }
+                    <div className='item'>
+                        <i className="fa-solid fa-cart-shopping"></i>
+                        <p className='cart_count'>0</p>
+                        <div className='text_box'>
+                            <p>Giỏ</p>
+                            <p>Hàng</p>
+                        </div>
+                    </div>
+                </div>
+                <div className='user_box'>
+                    {
+                        userStore.data ? (
+                            <div className='login'>
+                                {userStore.data.displayName}
+                                {(userStore.data.role == UserRole.ADMIN || userStore.data.role == UserRole.MASTER) && <i onClick={() => {
+                                    window.location.href = "/admin"
+                                }} className="fa-solid fa-lock"></i>}
+                                <i onClick={() => {
+                                    window.localStorage.removeItem("userLogin")
+                                    window.location.href = "/auth"
+                                }} className="cursor-pointer fa-solid fa-right-from-bracket"></i>
+                            </div>
+                        ) : (
+                            <div className='unlogin'>
+                                <div className='unlogin-content'>
+                                    <i className="fa-solid fa-user"></i>
+                                    <div onClick={() => {
+                                        navigate("/auth")
+                                    }} className='text_box'>
+                                        <p>Đăng</p>
+                                        <p>Nhập</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )
+                    }
+
+
+                </div>
+            </div>
+        </header>
+    )
+}
--- a/src/pages/home/components/Header/header.scss
+++ b/src/pages/home/components/Header/header.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 {}
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
--- a/src/pages/home/home.scss
+++ b/src/pages/home/home.scss
@@ -0,0 +1,37 @@
+$maxWContent: 1080px;
+$headerH: 60px;
+$footerH: 120px;
+
+.home_page {
+    width: 100vw;
+
+    header {
+        width: 100%;
+        height: $headerH;
+        display: flex;
+        justify-content: center;
+
+        .content {
+            width: $maxWContent;
+        }
+    }
+
+    #container {
+        display: flex;
+        justify-content: center;
+        height: calc(100vh - $headerH);
+        .content {
+            width: $maxWContent;
+        }
+    }
+
+    footer {
+        display: flex;
+        justify-content: center;
+        height: $footerH;
+
+        .content {
+            width: $maxWContent;
+        }
+    }
+}
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -0,0 +1,16 @@
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+import { userAction, userReducer } from "./slices/user.slice";
+
+
+const RootReducer = combineReducers({
+    user: userReducer
+})
+
+export type StoreType = ReturnType<typeof RootReducer>
+
+export const store = configureStore({
+    reducer: RootReducer
+})
+
+
+store.dispatch(userAction.fetchUserData())
--- a/src/stores/slices/user.slice.ts
+++ b/src/stores/slices/user.slice.ts
@@ -0,0 +1,43 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import type { User } from "../../types/user.type";
+import { Apis } from "../../apis";
+
+
+interface UserState {
+    data: User | null,
+    loading: boolean;
+}
+
+const InitUserState: UserState = {
+    data: null,
+    loading: false
+}
+
+
+const userSlice = createSlice({
+    name: "user",
+    initialState: InitUserState,
+    reducers: {
+
+    },
+    extraReducers: (bd) => {
+        bd.addCase(fetchUserData.fulfilled, (state, action) => {
+            state.data = action.payload
+        })
+    }
+})
+
+
+const fetchUserData = createAsyncThunk(
+    "user/fetchUserData",
+    async () => {
+        let result = await Apis.user.findById(localStorage.getItem("userLogin"))
+        return result.data
+    }
+)
+
+export const userReducer = userSlice.reducer;
+export const userAction = {
+    ...userSlice.actions,
+    fetchUserData
+}
--- a/src/types/user.type.ts
+++ b/src/types/user.type.ts
@@ -0,0 +1,24 @@
+export enum UserRole {
+    USER = "USER", /* người dùng bình thường, khách hàng, cần người dùng tự đăng ký */
+    MASTER = "MASTER", /* người quản trị cao nhất hệ thống, tạo mặc định */
+    ADMIN  = "ADMIN" /* quản trị hệ thống do master tạo ra */
+}
+
+export enum UserStatus {
+    ACTIVE = "ACTIVE", /* dùng bình thường */
+    INACTIVE = "INACTIVE", /* tạm khóa bởi người dùng */
+    BAN = "BAN" /* khóa bởi quản trị viên */
+}
+
+/* Lưu trữ dữ liệu của người dùng và quản trị hệ thống */
+export interface User {
+    id: string /* id định danh duy nhất cho 1 user */
+    userName: string /* tên đăng nhập */
+    password: string /* mật khẩu đăng nhập */
+    role: UserRole  /* vai trò của người trên hệ thống */
+    displayName: string /* tên hiển thị của người dùng trên hệ thống */
+    email: string /* email của người dùng, để gửi thông báo, khôi phục tài khoản,.... */
+    phoneNumber: string /* số điện thoại liên lạc, gửi thông báo, khôi phục tài khoản,... */
+    status: UserStatus /* trạng thái tài khoản */
+    banReason?: string /* lý do bị khóa nếu có */
+}
--- a/src/utils/api.util.ts
+++ b/src/utils/api.util.ts
@@ -0,0 +1,14 @@
+export const ApiUtil = {
+    writeQuery: (query: any) => {
+        console.log("query", query)
+        let resultStr = ``;
+        for(let key in query) {
+            if(query[key] == "") {
+               continue; 
+            }
+            resultStr += `${key}=${query[key]}&`
+        }
+
+        return resultStr.slice(0, resultStr.length - 1)
+    }
+}
--- a/src/utils/form.util.ts
+++ b/src/utils/form.util.ts
@@ -0,0 +1,8 @@
+import type { FormEvent } from "react";
+
+export const FormUtil = {
+    resetForm: (e: FormEvent) => {
+        let form = (e.target) as any;
+        form.reset();
+    }
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>