th-351: Sidebar for drivers (#358)

* th-351: * sidebar

* th-351: * active tab

* th-351: * close shift button to sidebar

* th-351: * small changes

* th-351: * small changes

* th-351: * small changes

Author: TetianaDoroshko

frontend/src/libs/components/router/router.tsx

@@ -92,7 +92,7 @@ const Router = (): JSX.Element => {
           <Route
             path={AppRoute.AVAILABLE_TRUCKS}
             element={
-              <PageLayout isSidebarHidden>
+              <PageLayout>
                 <AvailableTrucks />
               </PageLayout>
             }
@@ -101,7 +101,7 @@ const Router = (): JSX.Element => {
           <Route
             path={AppRoute.ORDERS}
             element={
-              <PageLayout isSidebarHidden>
+              <PageLayout>
                 <Orders />
               </PageLayout>
             }

frontend/src/libs/types/sidebar.type.ts

@@ -1,13 +1,10 @@
-import {
-  type SidebarTabsName,
-  type SidebarTabsPath,
-} from '~/libs/enums/enums.js';
+import { type AppRoute, type SidebarTabsName } from '~/libs/enums/enums.js';
 import { type IconName } from '~/libs/enums/icon-name.enum.js';
 import { type ValueOf } from '~/libs/types/types.js';
 
 type TabsType = {
   name: ValueOf<typeof SidebarTabsName>;
-  path: ValueOf<typeof SidebarTabsPath>;
+  path: ValueOf<typeof AppRoute>;
   icon: ValueOf<typeof IconName>;
 };
 

frontend/src/pages/dashboard/components/sidebar/components/end-shift-button/end-shift-button.tsx

@@ -0,0 +1,52 @@
+import { Button } from '~/libs/components/components.js';
+import { IconName } from '~/libs/enums/icon-name.enum.js';
+import { getValidClassNames } from '~/libs/helpers/helpers.js';
+import {
+  useAppDispatch,
+  useAppSelector,
+  useCallback,
+} from '~/libs/hooks/hooks.js';
+import { manufacturerKeyToReadableName } from '~/packages/trucks/libs/maps/manufacturer-key-to-readable-name.map.js';
+import { actions as driverActions } from '~/slices/driver/driver.js';
+import { ShiftStatus } from '~/slices/driver/libs/enums/enums.js';
+import {
+  selectActiveTruck,
+  selectShiftStatus,
+} from '~/slices/driver/selectors.js';
+
+import styles from './styles.module.scss';
+
+const EndShiftButton: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const shiftStatus = useAppSelector(selectShiftStatus);
+  const truck = useAppSelector(selectActiveTruck);
+
+  const isActive = shiftStatus === ShiftStatus.ACTIVE;
+
+  const handleClick = useCallback(() => {
+    void dispatch(driverActions.endShift());
+  }, [dispatch]);
+
+  const manufacturerName =
+    truck && manufacturerKeyToReadableName[truck.manufacturer];
+
+  return (
+    <>
+      {isActive && (
+        <div className={styles.block}>
+          <p className={getValidClassNames(styles.truckInfo, 'textMd')}>
+            {manufacturerName} {truck?.licensePlateNumber}
+          </p>
+          <Button
+            label={'End shift'}
+            frontIcon={IconName.TRUCK}
+            onClick={handleClick}
+            className={styles.button}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export { EndShiftButton };

frontend/src/pages/dashboard/components/sidebar/components/end-shift-button/styles.module.scss

@@ -0,0 +1,15 @@
+@import "src/assets/css/vars.scss";
+
+.block {
+  margin-top: auto;
+}
+
+.button {
+  width: 100%;
+}
+
+.truckInfo {
+  margin: 10px 0;
+  color: $grey;
+  text-align: center;
+}

frontend/src/pages/dashboard/components/sidebar/libs/helpers.ts

@@ -1,7 +1,5 @@
-import { AppRoute } from '~/libs/enums/app-route.enum';
-
 const checkActiveTab = (path: string, tab: string): boolean => {
-  return path === `${AppRoute.DASHBOARD}/${tab}`;
+  return path === tab;
 };
 
 export { checkActiveTab };

frontend/src/pages/dashboard/components/sidebar/libs/helpers/check-active-tab.helper.ts

@@ -1,42 +1,38 @@
-import {
-  IconName,
-  SidebarTabsName,
-  SidebarTabsPath,
-} from '~/libs/enums/enums.js';
+import { AppRoute, IconName, SidebarTabsName } from '~/libs/enums/enums.js';
 import { type TabsType } from '~/libs/types/types.js';
 
 const BUSINESS_TABS: TabsType[] = [
   {
     name: SidebarTabsName.ORDERS,
-    path: SidebarTabsPath.ORDERS,
+    path: AppRoute.DASHBOARD_ORDERS,
     icon: IconName.LIST,
   },
   {
     name: SidebarTabsName.TRUCKS,
-    path: SidebarTabsPath.TRUCKS,
+    path: AppRoute.DASHBOARD_TRUCKS,
     icon: IconName.TRUCK,
   },
   {
     name: SidebarTabsName.DRIVERS,
-    path: SidebarTabsPath.DRIVERS,
+    path: AppRoute.DASHBOARD_DRIVERS,
     icon: IconName.USERS,
   },
 ];
 
 const DRIVER_TABS: TabsType[] = [
   {
     name: SidebarTabsName.ORDERS,
-    path: SidebarTabsPath.ORDERS,
+    path: AppRoute.ORDERS,
     icon: IconName.LIST,
   },
   {
     name: SidebarTabsName.TRUCK,
-    path: SidebarTabsPath.CHOOSE_TRUCK,
+    path: AppRoute.AVAILABLE_TRUCKS,
     icon: IconName.TRUCK,
   },
   {
     name: SidebarTabsName.PROFILE,
-    path: SidebarTabsPath.PROFILE,
+    path: AppRoute.EDIT_PROFILE,
     icon: IconName.USER_PEN,
   },
 ];

frontend/src/pages/dashboard/components/sidebar/libs/tabs.ts

@@ -1,12 +1,13 @@
 import { Button } from '~/libs/components/components.js';
-import { AppRoute } from '~/libs/enums/enums.js';
+import { type AppRoute } from '~/libs/enums/enums.js';
 import { getValidClassNames } from '~/libs/helpers/helpers.js';
 import { useCallback, useLocation, useNavigate } from '~/libs/hooks/hooks.js';
-import { type TabName, type TabsType } from '~/libs/types/types.js';
+import { type TabsType, type ValueOf } from '~/libs/types/types.js';
 import { UserGroupKey } from '~/packages/users/libs/enums/enums.js';
 import { useAuthUser } from '~/slices/auth/auth.js';
 
-import { checkActiveTab } from './libs/helpers.js';
+import { EndShiftButton } from './components/end-shift-button/end-shift-button.js';
+import { checkActiveTab } from './libs/helpers/check-active-tab.helper.js';
 import { BUSINESS_TABS, DRIVER_TABS } from './libs/tabs.js';
 import styles from './styles.module.scss';
 
@@ -19,15 +20,15 @@ const Sidebar: React.FC<Properties> = ({ isCollapsed = false }: Properties) => {
   const location = useLocation();
   const user = useAuthUser();
 
+  const isDriver = user?.group.key === UserGroupKey.DRIVER;
+
   const getTabs = useCallback((): TabsType[] => {
-    return user?.group.key === UserGroupKey.BUSINESS
-      ? BUSINESS_TABS
-      : DRIVER_TABS;
-  }, [user?.group.key]);
+    return isDriver ? DRIVER_TABS : BUSINESS_TABS;
+  }, [isDriver]);
 
   const handleTabClick = useCallback(
-    (tabName: TabName) => () => {
-      navigate(`${AppRoute.DASHBOARD}/${tabName}`);
+    (tabName: ValueOf<typeof AppRoute>) => () => {
+      navigate(tabName);
     },
     [navigate],
   );
@@ -52,7 +53,7 @@ const Sidebar: React.FC<Properties> = ({ isCollapsed = false }: Properties) => {
           )}
           frontIcon={tab.icon}
           variant="text"
-          onClick={handleTabClick(tab.name)}
+          onClick={handleTabClick(tab.path)}
         >
           <span className={'visually-hidden'}>{tab.name}</span>
         </Button>
@@ -68,6 +69,7 @@ const Sidebar: React.FC<Properties> = ({ isCollapsed = false }: Properties) => {
       )}
     >
       <ul className={styles.list}>{renderTabs()}</ul>
+      {isDriver && <EndShiftButton />}
     </div>
   );
 };

frontend/src/pages/dashboard/components/sidebar/sidebar.tsx

@@ -1,6 +1,8 @@
 @import "src/assets/css/vars.scss";
 
 .container {
+  display: flex;
+  flex-direction: column;
   width: 210px;
   height: calc(100% - 20px);
   margin: 10px;

frontend/src/pages/dashboard/components/sidebar/styles.module.scss

@@ -1,41 +1,18 @@
-import { Button } from '~/libs/components/components.js';
 import { AppRoute } from '~/libs/enums/enums.js';
-import {
-  useAppDispatch,
-  useAppSelector,
-  useCallback,
-  useEffect,
-  useNavigate,
-} from '~/libs/hooks/hooks.js';
-import { actions as driverActions } from '~/slices/driver/driver.js';
+import { useAppSelector, useEffect, useNavigate } from '~/libs/hooks/hooks.js';
 import { ShiftStatus } from '~/slices/driver/libs/enums/enums.js';
-import {
-  selectActiveTruck,
-  selectShiftStatus,
-} from '~/slices/driver/selectors.js';
+import { selectShiftStatus } from '~/slices/driver/selectors.js';
 
 const Orders: React.FC = () => {
-  const dispatch = useAppDispatch();
-  const truck = useAppSelector(selectActiveTruck);
   const shiftStatus = useAppSelector(selectShiftStatus);
   const navigate = useNavigate();
   useEffect(() => {
     if (shiftStatus === ShiftStatus.DISABLED) {
       navigate(AppRoute.AVAILABLE_TRUCKS);
     }
   }, [shiftStatus, navigate]);
-  const handleClick = useCallback(() => {
-    void dispatch(driverActions.endShift());
-  }, [dispatch]);
 
-  return (
-    <div>
-      <p>
-        Your chosen truck: {truck?.manufacturer} ({truck?.id}) Test
-      </p>
-      <Button label={'End shift'} frontIcon={'truck'} onClick={handleClick} />
-    </div>
-  );
+  return <div>Orders page</div>;
 };
 
 export { Orders };