feat(three_order_form): implement 3 forms and add some types

.barrelsby.json

@@ -2,15 +2,18 @@
   "directory": [
     "./src/components/common",
     "./src/components/home",
+    "./src/components/order",
     "./src/constants",
     "./src/hooks",
     "./src/interfaces",
     "./src/layouts",
     "./src/pages",
     "./src/services/common",
     "./src/services/home",
+    "./src/services/order",
     "./src/states/common",
     "./src/states/home",
+    "./src/states/order",
     "./src/utils"
   ],
   "delete": true

__mock-server__/db.json

@@ -4,51 +4,56 @@
       "id": "1233-defc",
       "status": "progressing",
       "location": "Thu Duc, Ho Chi Minh, Viet Nam",
-      "number": 2,
       "fileName": "file1.pdf",
+      "number": 3,
       "pageNumber": 10,
       "coins": 50,
-      "paid": "Paid"
+      "paid": "Paid",
+      "size": 20
     },
     {
       "id": "1245-afce",
       "status": "ready",
       "location": "Tan Phu, Ho Chi Minh, Viet Nam",
-      "number": 2,
       "fileName": "file2.docx",
+      "number": 2,
       "pageNumber": 20,
       "coins": 75,
-      "paid": "Paid"
+      "paid": "Paid",
+      "size": 20
     },
     {
       "id": "1267-rfce",
       "status": "done",
       "location": "Tan Phu, Ho Chi Minh, Viet Nam",
-      "number": 2,
       "fileName": "file3.txt",
+      "number": 1,
       "pageNumber": 5,
       "coins": 30,
-      "paid": "Not Paid"
+      "paid": "Not Paid",
+      "size": 30
     },
     {
       "id": "1267-rfce",
       "status": "canceled",
       "location": "Tan Phu, Ho Chi Minh, Viet Nam",
-      "number": 2,
       "fileName": "file3.txt",
+      "number": 4,
       "pageNumber": 5,
       "coins": 30,
-      "paid": "Not Paid"
+      "paid": "Not Paid",
+      "size": 40
     },
     {
       "id": "1267-rfce",
       "status": "done",
       "location": "Tan Phu, Ho Chi Minh, Viet Nam",
-      "number": 2,
       "fileName": "file3.txt",
+      "number": 6,
       "pageNumber": 5,
       "coins": 30,
-      "paid": "Paid"
+      "paid": "Paid",
+      "size": 50
     }
   ],
   "slides": [
@@ -68,5 +73,11 @@
       "src": "https://we25.vn/media2018/Img_News/2020/06/08/khuon-vien-dh-bach-khoa-tp-hcm-khien-dan-tinh-me-man-voi-nhung-hanh-cay-xanh-tham-toa-bong-mat-quanh-nam-14_20200608150159.jpg",
       "alt": "slide4"
     }
-  ]
+  ],
+  "user": {
+    "coins": 200
+  },
+  "system": {
+    "extraFee": 2
+  }
 }

__mock-server__/package.json

@@ -9,4 +9,4 @@
   "scripts": {
     "start": "node server.js"
   }
-}
+}

index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './index';

src/App.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { NavigateFunction, useNavigate } from 'react-router-dom';
-import { HomeIcon } from '@heroicons/react/24/outline';
 import { AppSkeleton } from '@components/common';
+import { MAIN_MENU, SUB_MENU } from '@constants';
 import { AppLayout, AuthLayout } from '@layouts';
 import { AuthPage, HomePage } from '@pages';
 import { useUserStore } from '@states/common';
@@ -38,50 +38,51 @@ export default function App() {
         {
           type: 'skeleton',
           path: '/',
+          name: 'Skeleton',
           element: <AppSkeleton />
         },
         {
-          type: 'item',
-          icon: <HomeIcon className='h-5 w-5' />,
+          type: 'main-item',
           path: '/home',
-          name: 'Trang chủ',
+          name: MAIN_MENU.home,
           element: <HomePage />
+        },
+        {
+          type: 'main-item',
+          path: '/order',
+          name: MAIN_MENU.order,
+          element: <></>
+        },
+        {
+          type: 'main-item',
+          path: '/payment',
+          name: MAIN_MENU.payment,
+          element: <></>
+        },
+        {
+          type: 'main-item',
+          path: '/location',
+          name: MAIN_MENU.location,
+          element: <></>
+        },
+        {
+          type: 'sub-item',
+          path: '/help',
+          name: SUB_MENU.help,
+          element: <></>
+        },
+        {
+          type: 'sub-item',
+          path: '/settings',
+          name: SUB_MENU.settings,
+          element: <></>
+        },
+        {
+          type: 'logout-btn',
+          name: SUB_MENU.logout,
+          onClick() {}
+          //onClick: () => authService.logout().then(() => getData())
         }
-        // {
-        //   type: 'list',
-        //   icon: <CurrencyDollarIcon className='h-5 w-5' />,
-        //   name: 'Quỹ lab',
-        //   routes: [
-        //     {
-        //       type: 'item',
-        //       name: 'Thống kê',
-        //       icon: <ChartBarSquareIcon strokeWidth={2} className='h-4 w-4' />,
-        //       path: '/finance/statistic',
-        //       element: <></>
-        //     },
-        //     {
-        //       type: 'item',
-        //       icon: <CreditCardIcon strokeWidth={2} className='h-4 w-4' />,
-        //       name: 'Giao dịch',
-        //       path: '/finance/transaction',
-        //       element: <></>
-        //     }
-        //   ]
-        // },
-        // 'divider',
-        // {
-        //   type: 'item',
-        //   icon: <UserCircleIcon className='h-5 w-5' />,
-        //   path: '/user',
-        //   name: 'Cá nhân',
-        //   element: <></>
-        // },
-        // {
-        //   type: 'logout-btn',
-        //   icon: <PowerIcon className='h-5 w-5' />,
-        //   name: 'Đăng xuất',
-        //   //onClick: () => authService.logout().then(() => getData())
-        // }
       ]}
     />
   );

src/components/common/AppDrawer.tsx

@@ -8,7 +8,7 @@ export const AppDrawer: Component<{
 }> = ({ open, children, onClose }) => {
   return (
     <React.Fragment>
-      <Drawer open={open} className='p-0' onClose={onClose} size={256}>
+      <Drawer open={open} className='p-0 rounded-r-2xl' onClose={onClose} size={320}>
         {children}
       </Drawer>
     </React.Fragment>

src/components/common/AppNavigation.tsx

@@ -1,17 +1,47 @@
-import { useMemo, useState } from 'react';
-import { AppDrawer } from './AppDrawer';
-//import { ToggleSidebarBtn } from "./ToggleSidebarBtn";
+import { UserCircleIcon } from '@heroicons/react/24/solid';
+import coin from '@assets/coin.png';
+import { AppDrawer, DesktopNavbar, ToggleSidebarBtn, useSidebarMenu } from '@components/common';
+import { ScreenSize } from '@constants';
+import { useScreenSize } from '@hooks';
+import { useMenuBarStore } from '@states/common';
+import { useUserInfoStore } from '@states/home';
 
-// Tue's task in here. Feel free to be creative, not strict, you can do anything.
-export const AppNavigation: Component<{ menu: RouteMenu }> = ({ menu }) => {
-  const [openSidebar, setOpenSidebar] = useState<boolean>(true);
-  console.log(menu); // Do somthing with menu???
-
-  const SideMenu = useMemo(() => <></>, []);
+export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu }> = ({
+  mainMenu,
+  subMenu
+}) => {
+  const { screenSize } = useScreenSize();
+  const { openSidebar, handleOpenSidebar, SidebarMenu } = useSidebarMenu();
+  const { selectedMenu } = useMenuBarStore();
+  const { userInfoData } = useUserInfoStore();
 
   return (
-    <AppDrawer open={openSidebar} onClose={() => setOpenSidebar(false)}>
-      {SideMenu}
-    </AppDrawer>
+    <div className='w-full max-h-[768px] px-6 lg:px-9 py-3 lg:py-3 shadow-md lg:sticky my-3 lg:my-0'>
+      <div className='flex items-center justify-between h-full'>
+        <div className='flex items-center lg:hidden'>
+          <div
+            className='cursor-pointer opacity-40 focus:opacity-100 active:opacity-100 mr-4'
+            onClick={handleOpenSidebar}
+          >
+            <ToggleSidebarBtn open={openSidebar} />
+          </div>
+          <div className='text-2xl font-semibold'>{selectedMenu}</div>
+        </div>
+        {screenSize < ScreenSize.LG ? (
+          <AppDrawer open={openSidebar} onClose={handleOpenSidebar}>
+            <SidebarMenu mainMenu={mainMenu} subMenu={subMenu} />
+          </AppDrawer>
+        ) : (
+          <DesktopNavbar mainMenu={mainMenu} />
+        )}
+        <div className='flex items-center'>
+          <div className='flex items-center w-18.25 lg:w-26 h-6 lg:h-9 bg-[#FEECDC] pl-4 pr-6 lg:pl-6 lg:pr-9 rounded-lg -mr-5 font-bold text-[#9F580A] lg:font-semibold lg:text-2xl select-none text-base'>
+            {userInfoData.coins}
+          </div>
+          <img className='w-7 h-7 lg:w-10 lg:h-10' src={coin}></img>
+          <UserCircleIcon className='w-10 h-10 hidden lg:block lg:opacity-40 lg:ml-6 lg:cursor-pointer' />
+        </div>
+      </div>
+    </div>
   );
 };

src/components/common/DesktopNavbar.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom';
+import { List, ListItem } from '@material-tailwind/react';
+import logo from '@assets/logobk.png';
+import ticklab from '@assets/ticklab.png';
+import { useMenuBarStore } from '@states/common';
+
+export const DesktopNavbar: Component<{ mainMenu: RouteMenu }> = ({ mainMenu }) => {
+  const { selectedMenu, setSelectedMenu } = useMenuBarStore();
+
+  return (
+    <div className='flex'>
+      <div className='max-w-[60px] max-h-[60px] ml-0 mr-3 object-cover'>
+        <img className='w-full h-full' src={logo}></img>
+      </div>
+      <div className='max-w-[60px] max-h-[60px] ml-0 mr-3 object-cover'>
+        <img className='w-full h-full' src={ticklab}></img>
+      </div>
+      <List className='p-0 flex-row -ml-3 max-w-[calc(100%-36px)]'>
+        {mainMenu.map((menuItem, idx) => (
+          <Link key={idx} to='#'>
+            <ListItem
+              className={
+                'hover:bg-gray/1 focus:bg-blue-100 active:bg-blue-100 focus:text-blue/1 active:text-blue/1 focus:font-bold active:font-bold px-6 py-3 text-gray/4 font-medium rounded-lg text-2xl leading-9 ml-6 w-fit text-center' +
+                (selectedMenu === menuItem.name
+                  ? ' bg-blue-100 text-blue/1 font-bold pointer-events-none'
+                  : '')
+              }
+              onClick={() => setSelectedMenu(menuItem.name)}
+            >
+              {menuItem.name}
+            </ListItem>
+          </Link>
+        ))}
+      </List>
+    </div>
+  );
+};