Mtb 365 upgrade version antd (#377)

* update: update version antd

* feat: fix UI Color Picker and refactor UI update tag

* refactor: scss in user page

* refactor: SCSS

* chore

* chore

* update version antd to latest

---------

Co-authored-by: Quang Dai Thien <daithien2004@gmail.com>

Author: hathuanihi

frontend/package.json

@@ -14,13 +14,13 @@
     "gen-api": "cd ./src/services && npx @rtk-query/codegen-openapi openapiConfig.ts"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.6.1",
+    "@ant-design/icons": "^6.1.0",
     "@ctrl/tinycolor": "^4.1.0",
     "@hookform/resolvers": "^4.0.0",
     "@reduxjs/toolkit": "^2.5.1",
     "@rtk-query/codegen-openapi": "^2.0.0",
     "@tailwindcss/vite": "^4.0.6",
-    "antd": "^5.24.0",
+    "antd": "^6.2.1",
     "axios": "^1.8.1",
     "class-variance-authority": "^0.7.1",
     "dotenv": "^16.4.7",

frontend/src/App.tsx

@@ -1,44 +1,53 @@
 import { Bounce, ToastContainer } from 'react-toastify'
 import { renderRoutes } from './navigation/router'
 import { Routes } from 'react-router-dom'
-import { ConfigProvider, theme as antTheme } from 'antd' 
+import { ConfigProvider, theme as antTheme } from 'antd'
 import { useTheme } from '@app/hook/useTheme'
 import { useMemo } from 'react'
 
 function App() {
   const { theme, primaryColorHex } = useTheme()
-  
+
   const themeConfig = useMemo(() => ({
     algorithm: theme === 'dark' ? antTheme.darkAlgorithm : antTheme.defaultAlgorithm,
     token: {
       fontFamily: 'Open Sans, sans-serif',
-      colorPrimary: primaryColorHex, 
+      colorPrimary: primaryColorHex,
       colorBgBase: 'var(--bg-body)',
       colorTextBase: 'var(--text-primary)',
       colorBgContainer: 'var(--bg-container)',
+      colorBgElevated: 'var(--bg-container)',
       colorText: 'var(--text-primary)',
       colorTextSecondary: 'var(--text-secondary)',
       colorBorder: 'var(--border-color)'
+    },
+    components: {
+      Carousel: {
+        dotWidth: 5,
+        dotHeight: 5,
+        dotActiveWidth: 12,
+        dotGap: 5,
+      },
     }
-  }), [theme, primaryColorHex]) 
-  
+  }), [theme, primaryColorHex])
+
   return (
     <ConfigProvider theme={themeConfig}>
       <div className={`app-container ${theme}`}>
-      <Routes>{renderRoutes()}</Routes>
-      <ToastContainer
-        position='top-center'
-        autoClose={5000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick={false}
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme={theme === 'dark' ? 'dark' : 'light'}
-        transition={Bounce}
-      />
+        <Routes>{renderRoutes()}</Routes>
+        <ToastContainer
+          position='top-center'
+          autoClose={5000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick={false}
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme={theme === 'dark' ? 'dark' : 'light'}
+          transition={Bounce}
+        />
       </div>
     </ConfigProvider>
   )