@inventreedb/ui 0.0.1

package/src/components/nav/Header.tsx

@@ -0,0 +1,226 @@
+import {
+  ActionIcon,
+  Container,
+  Group,
+  Indicator,
+  Tabs,
+  Text,
+  Tooltip
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconBell, IconSearch } from '@tabler/icons-react';
+import { useQuery } from '@tanstack/react-query';
+import { type ReactNode, useEffect, useMemo, useState } from 'react';
+import { useMatch, useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { t } from '@lingui/core/macro';
+import { api } from '../../App';
+import { getNavTabs } from '../../defaults/links';
+import { navigateToLink } from '../../functions/navigation';
+import * as classes from '../../main.css';
+import { useServerApiState } from '../../states/ApiState';
+import { useLocalState } from '../../states/LocalState';
+import {
+  useGlobalSettingsState,
+  useUserSettingsState
+} from '../../states/SettingsState';
+import { useUserState } from '../../states/UserState';
+import { ScanButton } from '../buttons/ScanButton';
+import { SpotlightButton } from '../buttons/SpotlightButton';
+import { Alerts } from './Alerts';
+import { MainMenu } from './MainMenu';
+import { NavHoverMenu } from './NavHoverMenu';
+import { NavigationDrawer } from './NavigationDrawer';
+import { NotificationDrawer } from './NotificationDrawer';
+import { SearchDrawer } from './SearchDrawer';
+
+export function Header() {
+  const [setNavigationOpen, navigationOpen] = useLocalState((state) => [
+    state.setNavigationOpen,
+    state.navigationOpen
+  ]);
+  const [server] = useServerApiState((state) => [state.server]);
+  const [navDrawerOpened, { open: openNavDrawer, close: closeNavDrawer }] =
+    useDisclosure(navigationOpen);
+  const [
+    searchDrawerOpened,
+    { open: openSearchDrawer, close: closeSearchDrawer }
+  ] = useDisclosure(false);
+
+  const [
+    notificationDrawerOpened,
+    { open: openNotificationDrawer, close: closeNotificationDrawer }
+  ] = useDisclosure(false);
+
+  const { isLoggedIn } = useUserState();
+  const [notificationCount, setNotificationCount] = useState<number>(0);
+  const globalSettings = useGlobalSettingsState();
+
+  const navbar_message = useMemo(() => {
+    return server.customize?.navbar_message;
+  }, [server.customize]);
+
+  // Fetch number of notifications for the current user
+  const notifications = useQuery({
+    queryKey: ['notification-count'],
+    enabled: isLoggedIn(),
+    queryFn: async () => {
+      if (!isLoggedIn()) {
+        return null;
+      }
+
+      try {
+        const params = {
+          params: {
+            read: false,
+            limit: 1
+          }
+        };
+        const response = await api
+          .get(apiUrl(ApiEndpoints.notifications_list), params)
+          .catch(() => {
+            return null;
+          });
+        setNotificationCount(response?.data?.count ?? 0);
+        return response?.data ?? null;
+      } catch (error) {
+        return null;
+      }
+    },
+    refetchInterval: 30000,
+    refetchOnMount: true
+  });
+
+  // Sync Navigation Drawer state with zustand
+  useEffect(() => {
+    if (navigationOpen === navDrawerOpened) return;
+    setNavigationOpen(navDrawerOpened);
+  }, [navDrawerOpened]);
+
+  useEffect(() => {
+    if (navigationOpen === navDrawerOpened) return;
+    if (navigationOpen) openNavDrawer();
+    else closeNavDrawer();
+  }, [navigationOpen]);
+
+  return (
+    <div className={classes.layoutHeader}>
+      <SearchDrawer opened={searchDrawerOpened} onClose={closeSearchDrawer} />
+      <NavigationDrawer opened={navDrawerOpened} close={closeNavDrawer} />
+      <NotificationDrawer
+        opened={notificationDrawerOpened}
+        onClose={() => {
+          notifications.refetch();
+          closeNotificationDrawer();
+        }}
+      />
+      <Container className={classes.layoutHeaderSection} size='100%'>
+        <Group justify='space-between'>
+          <Group>
+            <NavHoverMenu openDrawer={openNavDrawer} />
+            <NavTabs />
+          </Group>
+          {navbar_message && (
+            <Text>
+              {/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */}
+              <span dangerouslySetInnerHTML={{ __html: navbar_message }} />
+            </Text>
+          )}
+          <Group>
+            <Tooltip position='bottom-end' label={t`Search`}>
+              <ActionIcon
+                onClick={openSearchDrawer}
+                variant='transparent'
+                aria-label='open-search'
+              >
+                <IconSearch />
+              </ActionIcon>
+            </Tooltip>
+            <SpotlightButton />
+            {globalSettings.isSet('BARCODE_ENABLE') && <ScanButton />}
+            <Indicator
+              radius='lg'
+              size='18'
+              label={notificationCount}
+              color='red'
+              disabled={notificationCount <= 0}
+              inline
+            >
+              <Tooltip position='bottom-end' label={t`Notifications`}>
+                <ActionIcon
+                  onClick={openNotificationDrawer}
+                  variant='transparent'
+                  aria-label='open-notifications'
+                >
+                  <IconBell />
+                </ActionIcon>
+              </Tooltip>
+            </Indicator>
+            <Alerts />
+            <MainMenu />
+          </Group>
+        </Group>
+      </Container>
+    </div>
+  );
+}
+
+function NavTabs() {
+  const user = useUserState();
+  const navigate = useNavigate();
+  const match = useMatch(':tabName/*');
+  const tabValue = match?.params.tabName;
+  const navTabs = getNavTabs(user);
+  const userSettings = useUserSettingsState();
+
+  const withIcons: boolean = useMemo(
+    () => userSettings.isSet('ICONS_IN_NAVBAR', false),
+    [userSettings]
+  );
+
+  const tabs: ReactNode[] = useMemo(() => {
+    const _tabs: ReactNode[] = [];
+
+    navTabs.forEach((tab) => {
+      if (tab.role && !user.hasViewRole(tab.role)) {
+        return;
+      }
+
+      _tabs.push(
+        <Tabs.Tab
+          value={tab.name}
+          key={tab.name}
+          leftSection={
+            withIcons &&
+            tab.icon && (
+              <ActionIcon variant='transparent'>{tab.icon}</ActionIcon>
+            )
+          }
+          onClick={(event: any) =>
+            navigateToLink(`/${tab.name}`, navigate, event)
+          }
+        >
+          {tab.title}
+        </Tabs.Tab>
+      );
+    });
+
+    return _tabs;
+  }, [navTabs, user, withIcons]);
+
+  return (
+    <Tabs
+      defaultValue='home'
+      classNames={{
+        root: classes.tabs,
+        list: classes.tabsList,
+        tab: classes.tab
+      }}
+      value={tabValue}
+    >
+      <Tabs.List>{tabs.map((tab) => tab)}</Tabs.List>
+    </Tabs>
+  );
+}

package/src/components/nav/InstanceDetail.tsx

@@ -0,0 +1,46 @@
+import { LoadingOverlay } from '@mantine/core';
+
+import type { ModelType } from '@lib/enums/ModelType';
+import type { UserRoles } from '@lib/enums/Roles';
+import { useUserState } from '../../states/UserState';
+import ClientError from '../errors/ClientError';
+import PermissionDenied from '../errors/PermissionDenied';
+import ServerError from '../errors/ServerError';
+
+export default function InstanceDetail({
+  status,
+  loading,
+  children,
+  requiredRole,
+  requiredPermission
+}: Readonly<{
+  status: number;
+  loading: boolean;
+  children: React.ReactNode;
+  requiredRole?: UserRoles;
+  requiredPermission?: ModelType;
+}>) {
+  const user = useUserState();
+
+  if (loading || !user.isLoggedIn()) {
+    return <LoadingOverlay />;
+  }
+
+  if (status >= 500) {
+    return <ServerError status={status} />;
+  }
+
+  if (status >= 400) {
+    return <ClientError status={status} />;
+  }
+
+  if (requiredRole && !user.hasViewRole(requiredRole)) {
+    return <PermissionDenied />;
+  }
+
+  if (requiredPermission && !user.hasViewPermission(requiredPermission)) {
+    return <PermissionDenied />;
+  }
+
+  return <>{children}</>;
+}

package/src/components/nav/Layout.tsx

@@ -0,0 +1,85 @@
+import { t } from '@lingui/core/macro';
+import { Container, Flex, Space } from '@mantine/core';
+import { Spotlight, createSpotlight } from '@mantine/spotlight';
+import { IconSearch } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
+
+import { getActions } from '../../defaults/actions';
+import * as classes from '../../main.css';
+import { useUserState } from '../../states/UserState';
+import { Boundary } from '../Boundary';
+import { Footer } from './Footer';
+import { Header } from './Header';
+
+export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
+  const location = useLocation();
+  const { isLoggedIn } = useUserState();
+
+  if (!isLoggedIn()) {
+    return (
+      <Navigate
+        to='/logged-in'
+        state={{
+          redirectUrl: location.pathname,
+          queryParams: location.search,
+          anchor: location.hash
+        }}
+      />
+    );
+  }
+
+  return children;
+};
+
+export const [firstStore, firstSpotlight] = createSpotlight();
+
+export default function LayoutComponent() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const defaultActions = getActions(navigate);
+  const [actions, setActions] = useState(defaultActions);
+  const [customActions, setCustomActions] = useState<boolean>(false);
+
+  function actionsAreChanging(change: []) {
+    if (change.length > defaultActions.length) setCustomActions(true);
+    setActions(change);
+  }
+  // firstStore.subscribe(actionsAreChanging);
+
+  // clear additional actions on location change
+  useEffect(() => {
+    if (customActions) {
+      setActions(defaultActions);
+      setCustomActions(false);
+    }
+  }, [location]);
+
+  return (
+    <ProtectedRoute>
+      <Flex direction='column' mih='100vh'>
+        <Header />
+        <Container className={classes.layoutContent} size='100%'>
+          <Boundary label={'layout'}>
+            <Outlet />
+          </Boundary>
+          {/* </ErrorBoundary> */}
+        </Container>
+        <Space h='xl' />
+        <Footer />
+        <Spotlight
+          actions={actions}
+          store={firstStore}
+          highlightQuery
+          searchProps={{
+            leftSection: <IconSearch size='1.2rem' />,
+            placeholder: t`Search...`
+          }}
+          shortcut={['mod + K', '/']}
+          nothingFound={t`Nothing found...`}
+        />
+      </Flex>
+    </ProtectedRoute>
+  );
+}

package/src/components/nav/MainMenu.tsx

@@ -0,0 +1,101 @@
+import { Trans } from '@lingui/react/macro';
+import {
+  Group,
+  Menu,
+  Skeleton,
+  Text,
+  UnstyledButton,
+  useMantineColorScheme
+} from '@mantine/core';
+import {
+  IconChevronDown,
+  IconLogout,
+  IconMoonStars,
+  IconSettings,
+  IconSun,
+  IconUserBolt,
+  IconUserCog
+} from '@tabler/icons-react';
+import { Link, useNavigate } from 'react-router-dom';
+
+import { doLogout } from '../../functions/auth';
+import * as classes from '../../main.css';
+import { useUserState } from '../../states/UserState';
+import { vars } from '../../theme';
+
+export function MainMenu() {
+  const navigate = useNavigate();
+  const [user, username] = useUserState((state) => [
+    state.user,
+    state.username
+  ]);
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+
+  return (
+    <Menu width={260} position='bottom-end'>
+      <Menu.Target>
+        <UnstyledButton className={classes.layoutHeaderUser}>
+          <Group gap={7}>
+            {username() ? (
+              <Text fw={500} size='sm' style={{ lineHeight: 1 }} mr={3}>
+                {username()}
+              </Text>
+            ) : (
+              <Skeleton height={20} width={40} radius={vars.radiusDefault} />
+            )}
+            <IconChevronDown />
+          </Group>
+        </UnstyledButton>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Label>
+          <Trans>Settings</Trans>
+        </Menu.Label>
+        <Menu.Item
+          leftSection={<IconUserCog />}
+          component={Link}
+          to='/settings/user'
+        >
+          <Trans>Account Settings</Trans>
+        </Menu.Item>
+        {user?.is_staff && (
+          <Menu.Item
+            leftSection={<IconSettings />}
+            component={Link}
+            to='/settings/system'
+          >
+            <Trans>System Settings</Trans>
+          </Menu.Item>
+        )}
+        <Menu.Item
+          onClick={toggleColorScheme}
+          leftSection={colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />}
+          c={
+            colorScheme === 'dark' ? vars.colors.yellow[4] : vars.colors.blue[6]
+          }
+        >
+          <Trans>Change Color Mode</Trans>
+        </Menu.Item>
+        {user?.is_staff && <Menu.Divider />}
+        {user?.is_staff && (
+          <Menu.Item
+            leftSection={<IconUserBolt />}
+            component={Link}
+            to='/settings/admin'
+          >
+            <Trans>Admin Center</Trans>
+          </Menu.Item>
+        )}
+        <Menu.Divider />
+        <Menu.Item
+          leftSection={<IconLogout />}
+          onClick={() => {
+            doLogout(navigate);
+          }}
+        >
+          <Trans>Logout</Trans>
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

package/src/components/nav/NavHoverMenu.tsx

@@ -0,0 +1,15 @@
+import { UnstyledButton } from '@mantine/core';
+
+import { InvenTreeLogo } from '../items/InvenTreeLogo';
+
+export function NavHoverMenu({
+  openDrawer
+}: Readonly<{
+  openDrawer: () => void;
+}>) {
+  return (
+    <UnstyledButton onClick={() => openDrawer()} aria-label='navigation-menu'>
+      <InvenTreeLogo />
+    </UnstyledButton>
+  );
+}

package/src/components/nav/NavigationDrawer.tsx

@@ -0,0 +1,230 @@
+import { t } from '@lingui/core/macro';
+import {
+  Container,
+  Drawer,
+  Flex,
+  Group,
+  ScrollArea,
+  Space
+} from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { ModelType } from '@lib/enums/ModelType';
+import { UserRoles } from '@lib/enums/Roles';
+import { AboutLinks, DocumentationLinks } from '../../defaults/links';
+import useInstanceName from '../../hooks/UseInstanceName';
+import * as classes from '../../main.css';
+import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useUserState } from '../../states/UserState';
+import { InvenTreeLogo } from '../items/InvenTreeLogo';
+import { type MenuLinkItem, MenuLinks } from '../items/MenuLinks';
+import { StylishText } from '../items/StylishText';
+
+// TODO @matmair #1: implement plugin loading and menu item generation see #5269
+const plugins: MenuLinkItem[] = [];
+
+export function NavigationDrawer({
+  opened,
+  close
+}: Readonly<{
+  opened: boolean;
+  close: () => void;
+}>) {
+  return (
+    <Drawer
+      opened={opened}
+      onClose={close}
+      size='lg'
+      withCloseButton={false}
+      classNames={{
+        body: classes.navigationDrawer
+      }}
+    >
+      <DrawerContent closeFunc={close} />
+    </Drawer>
+  );
+}
+
+function DrawerContent({ closeFunc }: Readonly<{ closeFunc?: () => void }>) {
+  const user = useUserState();
+
+  const globalSettings = useGlobalSettingsState();
+
+  const [scrollHeight, setScrollHeight] = useState(0);
+  const ref = useRef(null);
+  const { height } = useViewportSize();
+
+  const title = useInstanceName();
+
+  // update scroll height when viewport size changes
+  useEffect(() => {
+    if (ref.current == null) return;
+    setScrollHeight(height - ref.current['clientHeight'] - 65);
+  });
+
+  // Construct menu items
+  const menuItemsNavigate: MenuLinkItem[] = useMemo(() => {
+    return [
+      {
+        id: 'home',
+        title: t`Dashboard`,
+        link: '/',
+        icon: 'dashboard'
+      },
+      {
+        id: 'parts',
+        title: t`Parts`,
+        hidden: !user.hasViewPermission(ModelType.part),
+        link: '/part',
+        icon: 'part'
+      },
+      {
+        id: 'stock',
+        title: t`Stock`,
+        link: '/stock',
+        hidden: !user.hasViewPermission(ModelType.stockitem),
+        icon: 'stock'
+      },
+      {
+        id: 'build',
+        title: t`Manufacturing`,
+        link: '/manufacturing/',
+        hidden: !user.hasViewRole(UserRoles.build),
+        icon: 'build'
+      },
+      {
+        id: 'purchasing',
+        title: t`Purchasing`,
+        link: '/purchasing/',
+        hidden: !user.hasViewRole(UserRoles.purchase_order),
+        icon: 'purchase_orders'
+      },
+      {
+        id: 'sales',
+        title: t`Sales`,
+        link: '/sales/',
+        hidden: !user.hasViewRole(UserRoles.sales_order),
+        icon: 'sales_orders'
+      },
+      {
+        id: 'users',
+        title: t`Users`,
+        link: '/core/index/users',
+        icon: 'user'
+      },
+      {
+        id: 'groups',
+        title: t`Groups`,
+        link: '/core/index/groups',
+        icon: 'group'
+      }
+    ];
+  }, [user]);
+
+  const menuItemsAction: MenuLinkItem[] = useMemo(() => {
+    return [
+      {
+        id: 'barcode',
+        title: t`Scan Barcode`,
+        link: '/scan',
+        icon: 'barcode',
+        hidden: !globalSettings.isSet('BARCODE_ENABLE')
+      }
+    ];
+  }, [user, globalSettings]);
+
+  const menuItemsSettings: MenuLinkItem[] = useMemo(() => {
+    return [
+      {
+        id: 'notifications',
+        title: t`Notifications`,
+        link: '/notifications',
+        icon: 'notification'
+      },
+      {
+        id: 'user-settings',
+        title: t`User Settings`,
+        link: '/settings/user',
+        icon: 'user'
+      },
+      {
+        id: 'system-settings',
+        title: t`System Settings`,
+        link: '/settings/system',
+        icon: 'system',
+        hidden: !user.isStaff()
+      },
+      {
+        id: 'admin-center',
+        title: t`Admin Center`,
+        link: '/settings/admin',
+        icon: 'admin',
+        hidden: !user.isStaff()
+      }
+    ];
+  }, [user]);
+
+  const menuItemsDocumentation: MenuLinkItem[] = useMemo(
+    () => DocumentationLinks(),
+    []
+  );
+
+  const menuItemsAbout: MenuLinkItem[] = useMemo(
+    () => AboutLinks(globalSettings, user),
+    []
+  );
+
+  return (
+    <Flex direction='column' mih='100vh' p={16}>
+      <Group wrap='nowrap'>
+        <InvenTreeLogo />
+        <StylishText size='xl'>{title}</StylishText>
+      </Group>
+      <Space h='xs' />
+      <Container className={classes.layoutContent} p={0}>
+        <ScrollArea h={scrollHeight} type='always' offsetScrollbars>
+          <MenuLinks
+            title={t`Navigation`}
+            links={menuItemsNavigate}
+            beforeClick={closeFunc}
+          />
+          <MenuLinks
+            title={t`Settings`}
+            links={menuItemsSettings}
+            beforeClick={closeFunc}
+          />
+          <MenuLinks
+            title={t`Actions`}
+            links={menuItemsAction}
+            beforeClick={closeFunc}
+          />
+          <Space h='md' />
+          {plugins.length > 0 ? (
+            <MenuLinks
+              title={t`Plugins`}
+              links={plugins}
+              beforeClick={closeFunc}
+            />
+          ) : (
+            <></>
+          )}
+        </ScrollArea>
+      </Container>
+      <div ref={ref}>
+        <Space h='md' />
+        <MenuLinks
+          title={t`Documentation`}
+          links={menuItemsDocumentation}
+          beforeClick={closeFunc}
+        />
+        <Space h='md' />
+        <MenuLinks
+          title={t`About`}
+          links={menuItemsAbout}
+          beforeClick={closeFunc}
+        />
+      </div>
+    </Flex>
+  );
+}