Merge pull request idurar#609 from idurar/upgrade/antd-to-4-24

📦️ Upgrade Antd to 4.24
eltonsoftware · Oct 28, 2023 · 0fa108e · 0fa108e
2 parents f2aa6f9 + 1a2e7e7
commit 0fa108e
Show file tree

Hide file tree

Showing 43 changed files with 1,006 additions and 1,334 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,7 +7,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@craco/craco": "5.5.0",
-    "antd": "4.17.4",
+    "antd": "^4.24.14",
     "axios": "0.27.2",
     "craco-alias": "3.0.1",
     "craco-less": "1.17.1",

diff --git a/frontend/src/app/HeaderContent/index.jsx b/frontend/src/app/HeaderContent/index.jsx
@@ -1,17 +1,10 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-
+import { Link, useLocation } from 'react-router-dom';
 import { Avatar, Menu, Dropdown } from 'antd';
-import Notifications from '@/components/Notification';
+// import Notifications from '@/components/Notification';
 
-import {
-  AppstoreOutlined,
-  SettingOutlined,
-  UserOutlined,
-  LogoutOutlined,
-  BellOutlined,
-  DeleteOutlined,
-} from '@ant-design/icons';
+import { AppstoreOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons';
 import photo from '@/style/images/photo.png';
 import { checkImage } from '@/request';
 
@@ -30,9 +23,9 @@ export default function HeaderContent() {
     ? BASE_URL + currentAdmin?.photo
     : photo;
 
-  const profileDropdown = (
-    <div className="profileDropdown whiteBox shadow" style={{ minWidth: '200px' }}>
-      <div className="pad15" onClick={() => history.push('/profile')} style={{ cursor: 'pointer' }}>
+  const ProfileDropdown = () => {
+    return (
+      <div className="profileDropdown" onClick={() => history.push('/profile')}>
         <Avatar
           size="large"
           className="last"
@@ -41,50 +34,63 @@ export default function HeaderContent() {
         >
           {currentAdmin?.name.charAt(0).toUpperCase()}
         </Avatar>
-        <div className="info">
+        <div className="profileDropdownInfo">
           <p className="strong">
             {currentAdmin?.name} {currentAdmin?.surname}
           </p>
           <p>{currentAdmin?.email}</p>
         </div>
       </div>
-      <div className="line"></div>
+    );
+  };
 
-      <div>
-        <Menu>
-          <Menu.Item
-            icon={<SettingOutlined />}
-            key={`${uniqueId()}`}
-            onClick={() => history.push('/profile')}
-          >
-            Profil Settings
-          </Menu.Item>
-          <Menu.Item
-            icon={<SettingOutlined />}
-            key={`${uniqueId()}`}
-            onClick={() => history.push('/settings/')}
-          >
-            App Settings
-          </Menu.Item>
-        </Menu>
-      </div>
-      <div className="line"></div>
-      <div>
-        <Menu>
-          <Menu.Item
-            icon={<LogoutOutlined />}
-            key={`${uniqueId()}`}
-            onClick={() => history.push('/logout')}
-          >
-            logout
-          </Menu.Item>
-        </Menu>
-      </div>
-    </div>
-  );
+  const DropdownMenu = ({ text }) => {
+    return <span style={{}}>{text}</span>;
+  };
+
+  const items = [
+    {
+      label: <ProfileDropdown className="headerDropDownMenu" />,
+      key: 'ProfileDropdown',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      icon: <SettingOutlined />,
+      key: 'settingProfile',
+      label: (
+        <Link to={'/profile'}>
+          <DropdownMenu text={'profile Settings'} />
+        </Link>
+      ),
+    },
+    {
+      icon: <SettingOutlined />,
+      key: 'settingApp',
+      label: <Link to={'/settings'}>App Settings</Link>,
+    },
+
+    {
+      type: 'divider',
+    },
+
+    {
+      icon: <LogoutOutlined />,
+      key: 'logout',
+      label: <Link to={'/logout'}>Logout</Link>,
+    },
+  ];
   return (
     <div className="headerIcon" style={{ position: 'absolute', right: 0, zIndex: '99' }}>
-      <Dropdown overlay={profileDropdown} trigger={['click']} placement="bottomRight">
+      <Dropdown
+        menu={{
+          items,
+        }}
+        trigger={['click']}
+        placement="bottomRight"
+        stye={{ width: '280px' }}
+      >
         {/* <Badge dot> */}
         <Avatar
           className="last"
@@ -103,12 +109,9 @@ export default function HeaderContent() {
         }}
       />
 
-      <Dropdown overlay={<Notifications />} trigger={['click']} placement="bottomRight">
-        {/* <Badge dot> */}
+      {/* <Dropdown overlay={<Notifications />} trigger={['click']} placement="bottomRight">
         <Avatar icon={<BellOutlined />} />
-
-        {/* </Badge> */}
-      </Dropdown>
+      </Dropdown> */}
     </div>
   );
 }
diff --git a/frontend/src/app/Navigation/index.jsx b/frontend/src/app/Navigation/index.jsx
@@ -24,30 +24,6 @@ import {
   FileOutlined,
 } from '@ant-design/icons';
 
-const SIDEBAR_MENU = [
-  { key: '/', icon: <DashboardOutlined />, title: 'Dashboard' },
-  { key: '/lead', icon: <UserAddOutlined />, title: 'Lead' },
-  { key: '/offer', icon: <FileOutlined />, title: 'Offer' },
-  { key: '/customer', icon: <CustomerServiceOutlined />, title: 'Customer' },
-  // { key: '/order', icon: <ShopOutlined />, title: 'Order' },
-  // { key: '/inventory', icon: <InboxOutlined />, title: 'Inventory' },
-  // { key: '/kyc', icon: <ShoppingCartOutlined />, title: 'Kyc' },
-  { key: '/invoice', icon: <FileTextOutlined />, title: 'Invoice' },
-  { key: '/quote', icon: <FileSyncOutlined />, title: 'Quote' },
-  { key: '/payment', icon: <CreditCardOutlined />, title: 'Payment Invoice' },
-  { key: '/employee', icon: <UserOutlined />, title: 'Employee' },
-  { key: '/admin', icon: <TeamOutlined />, title: 'Admin' },
-];
-
-const SETTINGS_SUBMENU = [
-  { key: '/settings', title: 'General Settings' },
-
-  { key: '/email', title: 'Email templates' },
-
-  { key: '/payment/mode', title: 'Payment Mode' },
-  { key: '/settings/advanced', title: 'Advanced Settings' },
-];
-
 const { Sider } = Layout;
 const { SubMenu } = Menu;
 
@@ -71,6 +47,49 @@ function Sidebar({ collapsible }) {
   const [showLogoApp, setLogoApp] = useState(isNavMenuClose);
   const [currentPath, setCurrentPath] = useState(location.pathname);
 
+  const items = [
+    { key: 'dashboard', icon: <DashboardOutlined />, label: <Link to={'/'}>Dashboard</Link> },
+    { key: 'lead', icon: <UserAddOutlined />, label: <Link to={'/lead'}>Lead</Link> },
+    { key: 'offer', icon: <FileOutlined />, label: <Link to={'/offer'}>Offer</Link> },
+    {
+      key: 'customer',
+      icon: <CustomerServiceOutlined />,
+      label: <Link to={'/customer'}>Customer</Link>,
+    },
+    // { key: 'order', icon: <ShopOutlined />, label: <Link to={'/'}>Lead</Link> Order },
+    // { key: 'inventory', icon: <InboxOutlined />, label: <Link to={'/'}>Lead</Link> Inventory },
+    // { key: 'kyc', icon: <ShoppingCartOutlined />, label: <Link to={'/'}>Lead</Link> Kyc },
+    { key: 'invoice', icon: <FileTextOutlined />, label: <Link to={'/invoice'}>Invoice</Link> },
+    { key: 'quote', icon: <FileSyncOutlined />, label: <Link to={'/quote'}>Quote</Link> },
+    { key: 'payment', icon: <CreditCardOutlined />, label: <Link to={'/payment'}>Payment</Link> },
+    { key: 'employee', icon: <UserOutlined />, label: <Link to={'/employee'}>Employee</Link> },
+    { key: 'admin', icon: <TeamOutlined />, label: <Link to={'/admin'}>Admin</Link> },
+    {
+      label: 'Settings',
+      key: 'settings',
+      icon: <SettingOutlined />,
+      children: [
+        {
+          key: 'generalSettings',
+          label: <Link to={'/settings'}>General Settings</Link>,
+        },
+        {
+          key: 'emailTemplates',
+          label: <Link to={'/email'}>Email templates</Link>,
+        },
+        {
+          key: 'paymentMode',
+          label: <Link to={'/payment/mode'}>Payment Mode</Link>,
+        },
+        {
+          key: 'advancedSettings',
+          icon: <UserOutlined />,
+          label: <Link to={'/settings/advanced'}>Advanced Settings</Link>,
+        },
+      ],
+    },
+  ];
+
   useEffect(() => {
     if (location) if (currentPath !== location.pathname) setCurrentPath(location.pathname);
   }, [location, currentPath]);
@@ -109,22 +128,12 @@ function Sidebar({ collapsible }) {
             />
           )}
         </div>
-        <Menu mode="inline" selectedKeys={[currentPath]}>
-          {SIDEBAR_MENU.map((menuItem) => (
-            <Menu.Item key={menuItem.key} icon={menuItem.icon}>
-              <Link to={menuItem.key} />
-              {menuItem.title}
-            </Menu.Item>
-          ))}
-          <SubMenu key={'Settings'} icon={<SettingOutlined />} title={'Settings'}>
-            {SETTINGS_SUBMENU.map((menuItem) => (
-              <Menu.Item key={menuItem.key}>
-                <Link to={menuItem.key} />
-                {menuItem.title}
-              </Menu.Item>
-            ))}
-          </SubMenu>
-        </Menu>
+        <Menu
+          items={items}
+          mode="inline"
+          // selectedKeys={[currentPath]}
+        />
+        ;
       </Sider>
     </>
   );
@@ -148,7 +157,7 @@ function MobileSidebar() {
         placement="left"
         closable={false}
         onClose={onClose}
-        visible={visible}
+        open={visible}
         className="mobile-sidebar-wraper"
       >
         <Sidebar collapsible={false} />

diff --git a/frontend/src/components/CrudModal/index.jsx b/frontend/src/components/CrudModal/index.jsx
@@ -43,7 +43,7 @@ export default function DeleteModal({ config, children }) {
   return (
     <Modal
       title={modalTitle}
-      visible={isModalOpen}
+      open={isModalOpen}
       onOk={handleOk}
       onCancel={handleCancel}
       confirmLoading={isLoading}