Refactor layout (#112)

* refactor layout and content components

* Clean up search bar

* Add bar component

* Fix minimized modeler

src/management-system-v2/app/(auth)/layout.tsx

@@ -1,60 +1,8 @@
-'use client';
-
-import React from 'react';
-import styles from './layout.module.scss';
-import { FC, PropsWithChildren, useEffect, useState } from 'react';
-import { Layout as AntLayout, Button, Menu, MenuProps, Popover, Space, Tooltip } from 'antd';
-import {
-  DeploymentUnitOutlined,
-  FundProjectionScreenOutlined,
-  EditOutlined,
-  UnorderedListOutlined,
-  ProfileOutlined,
-  FileAddOutlined,
-  PlaySquareOutlined,
-  SettingOutlined,
-  ApiOutlined,
-  UserOutlined,
-} from '@ant-design/icons';
-import Logo from '@/public/proceed.svg';
-import Image from 'next/image';
-import { usePathname, useRouter } from 'next/navigation';
-import cn from 'classnames';
-
-// type AuthLayoutProps = PropsWithChildren<{
-//   headerContent: React.ReactNode | undefined;
-// }>;
+import { FC, PropsWithChildren } from 'react';
+import Layout from '@/components/layout';
 
 const AuthLayout: FC<PropsWithChildren> = ({ children }) => {
-  return (
-    <AntLayout>
-      <AntLayout.Header
-        style={{ backgroundColor: '#fff', borderBottom: '1px solid #eee' }}
-        className={styles.Header}
-      >
-        <Image
-          src="/proceed.svg"
-          alt="PROCEED Logo"
-          className={cn(styles.Logo /* , { [styles.collapsed]: collapsed } */)}
-          width={160}
-          height={63}
-          priority
-        />
-      </AntLayout.Header>
-      <AntLayout.Content>
-        {/* <Space direction="vertical" align="center" size="large" style={{ display: 'flex' }}> */}
-        {/* <Space direction="horizontal" align="center"> */}
-        <div className={cn(styles.Auth)}>{children}</div>
-        {/* </Space> */}
-        {/* </Space> */}
-      </AntLayout.Content>
-      <AntLayout.Footer className={cn(styles.Footer)}>
-        <Space direction="vertical" align="center" style={{ width: '100%' }}>
-          © 2023 PROCEED Labs GmbH
-        </Space>
-      </AntLayout.Footer>
-    </AntLayout>
-  );
+  return <Layout>{children}</Layout>;
 };
 
 export default AuthLayout;

src/management-system-v2/app/(dashboard)/iam/users/page.tsx

@@ -23,6 +23,7 @@ import Auth from '@/lib/AuthCanWrapper';
 import Content from '@/components/content';
 import HeaderActions from './header-actions';
 import useFuzySearch from '@/lib/useFuzySearch';
+import Bar from '@/components/bar';
 
 const UsersPage: FC = () => {
   const { error, data, isLoading, refetch: refetchUsers } = useGetAsset('/users', {});
@@ -91,34 +92,26 @@ const UsersPage: FC = () => {
               <Button icon={<DeleteOutlined />} type="text" />
             </Popconfirm>
           </Tooltip>
-        ) : null,
+        ) : undefined,
     },
   ];
 
   if (error)
     return (
-      <Result
-        status="error"
-        title="Failed to fetch your profile"
-        subTitle="An error ocurred while fetching your profile, please try again."
-      />
+      <Content title="Identity and Access Management">
+        <Result
+          status="error"
+          title="Failed to fetch your profile"
+          subTitle="An error ocurred while fetching your profile, please try again."
+        />
+      </Content>
     );
 
   return (
-    <Content title="Identity and Access Management" rightNode={<HeaderActions />}>
-      <Row className={styles.Headerrow}>
-        <Col
-          xs={24}
-          sm={24}
-          md={24}
-          lg={10}
-          xl={6}
-          className={cn({ [styles.SelectedRow]: selectedRowKeys.length > 0 })}
-          style={{
-            justifyContent: 'start',
-          }}
-        >
-          {selectedRowKeys.length > 0 ? (
+    <Content title="Identity and Access Management">
+      <Bar
+        leftNode={
+          selectedRowKeys.length ? (
             <Space size={20}>
               <Button type="text" icon={<CloseOutlined />} onClick={() => setSelectedRowKeys([])} />
               <span>{selectedRowKeys.length} selected: </span>
@@ -130,19 +123,15 @@ const UsersPage: FC = () => {
                 <Button type="text" icon={<DeleteOutlined />} />
               </Popconfirm>
             </Space>
-          ) : null}
-        </Col>
-        <Col className={styles.Headercol} xs={22} sm={22} md={22} lg={9} xl={13}>
-          <Input.Search
-            size="middle"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            allowClear
-            placeholder="Search Users"
-          />
-        </Col>
-      </Row>
-
+          ) : undefined
+        }
+        searchProps={{
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          placeholder: 'Search Users ...',
+        }}
+        rightNode={<HeaderActions />}
+      />
       <Table
         columns={columns}
         dataSource={filteredUsers}
@@ -152,11 +141,6 @@ const UsersPage: FC = () => {
             setSelectedRowKeys(selectedRowKeys as string[]);
           },
         }}
-        /* onRow={(record) => ({
-        onMouseEnter: () => setHovered(record.id),
-        onMouseOut: () => setHovered(''),
-      })} */
-        /* scroll={{ x: 800 }} */
         rowKey="id"
         loading={isLoading || deletingUser}
         size="middle"