Login Page and 404 response

assets/app.css

@@ -0,0 +1,7 @@
+.betaCard {
+  cursor: pointer;
+}
+
+.profile {
+  cursor: pointer;
+}

src/App.tsx

@@ -1,40 +1,115 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { ConfigProvider, Layout, Row, Col } from 'antd';
+import { ConfigProvider, Layout, Row, Col, Spin } from 'antd';
 import NoPage from './Pages/NoPage';
-import useScreenSize from './Hooks/useScreenSize';
 import Home from './Pages/Home';
 import CustomHeader from './Components/CustomHeader';
+import Crumb from './Components/Crumb';
+import Reports from './Pages/Reports';
+import CreateReport from './Pages/CreateReport';
+import Report from './Pages/Report';
+import { auth } from './Firebase/firebase';
+import {
+  AccountType,
+  changeInfo,
+  changeLoggedIn,
+  changeType
+} from './Redux/features/account/account-slice';
+import { LoadingOutlined } from '@ant-design/icons';
+import { useDispatch } from 'react-redux';
+import { fetchAllDocuments } from './Utilities/Util';
 
-const { Header, Content } = Layout;
+const { Content } = Layout;
 
 const App = () => {
-  const screenSize = useScreenSize();
+  const [pending, setPending] = React.useState(true);
+  const dispatch = useDispatch();
 
-  React.useEffect(() => {}, []);
+  React.useEffect(() => {
+    auth.onAuthStateChanged(async (user) => {
+      if (user) {
+        const docs = await fetchAllDocuments('users');
+        docs.forEach((doc) => {
+          const id = doc.id;
+          const data = doc.data();
+          const name = data.name as string;
+          const email = data.email as string;
+          const type = data.type as AccountType;
+          if (id === user.uid) {
+            dispatch(changeInfo({ name, email }));
+            dispatch(changeType(type));
+          }
+        });
+        dispatch(changeLoggedIn(true));
+        setPending(false);
+      } else {
+        dispatch(changeLoggedIn(false));
+        setPending(false);
+      }
+    });
+  }, []);
 
   return (
     <BrowserRouter>
-      <ConfigProvider>
+      <ConfigProvider
+        theme={{
+          token: {
+            colorPrimary: '#f78713'
+          },
+          components: {
+            Layout: {
+              bodyBg: 'rgb(249, 249, 249)'
+            }
+          }
+        }}
+      >
         <Layout style={{ minHeight: '100vh' }}>
           <CustomHeader />
-          <Content
-            style={{
-              margin: '24px 16px',
-              padding: 24
-            }}
-          >
-            <Row justify={'center'}>
-              <Col span={21}>
-                <Routes>
-                  <Route path='/' element={<Home />} />
-                  <Route index element={<Home />} />
-                  <Route path='404' element={<NoPage />} />
-                  <Route path='*' element={<NoPage />} />
-                </Routes>
-              </Col>
-            </Row>
-          </Content>
+          {!pending ? (
+            <Content
+              style={{
+                margin: '24px 16px',
+                padding: 24
+              }}
+            >
+              <Row justify={'center'} gutter={[0, 10]}>
+                <Col span={21}>
+                  <Crumb />
+                </Col>
+                <Col span={21}>
+                  <Routes>
+                    <Route path='/' element={<Home />} />
+                    <Route index element={<Home />} />
+                    <Route path='reports' element={<Reports />} />
+                    <Route path='reports/create' element={<CreateReport />} />
+                    <Route path='reports/:id' element={<Report />} />
+                    <Route path='404' element={<NoPage />} />
+                    <Route path='*' element={<NoPage />} />
+                  </Routes>
+                </Col>
+              </Row>
+            </Content>
+          ) : (
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '100wh',
+                height: 'calc(100vh - 100px)'
+              }}
+            >
+              <Row justify={'center'} gutter={[0, 20]}>
+                <Col span={6}>
+                  <Spin size='large' indicator={<LoadingOutlined />} />
+                </Col>
+                <Col span={24}>
+                  {' '}
+                  <span style={{ margin: '100px' }}>Loading...</span>
+                </Col>
+              </Row>
+            </div>
+          )}
         </Layout>
       </ConfigProvider>
     </BrowserRouter>

src/Components/Crumb.tsx

@@ -0,0 +1,30 @@
+import { Breadcrumb } from 'antd';
+import React from 'react';
+import { getCrumbItemsFromPath } from '../Utilities/Util';
+import { HomeOutlined } from '@ant-design/icons';
+import { Link, useLocation } from 'react-router-dom';
+
+const Crumb: React.FC = () => {
+  const location = useLocation();
+  const path = location.pathname;
+  const homeItem = {
+    title: (
+      <Link to='/'>
+        <HomeOutlined /> <span>Home</span>
+      </Link>
+    )
+  };
+  const rawItems = React.useMemo(() => {
+    return getCrumbItemsFromPath(path, homeItem);
+  }, [path]);
+  const items = rawItems.map((el, idx) => {
+    if (idx === 0) {
+      return el;
+    }
+    const result = { ...el, title: <Link to={el.href}>{el.title}</Link> };
+    return result;
+  });
+  return <Breadcrumb items={items} separator={'>'} />;
+};
+
+export default Crumb;

src/Components/CustomHeader.tsx

@@ -1,48 +1,105 @@
 import React from 'react';
-import { Col, Layout, Row, Typography, Button } from 'antd';
+import {
+  Col,
+  Layout,
+  Row,
+  Typography,
+  Avatar,
+  Dropdown,
+  MenuProps,
+  message
+} from 'antd';
 import useScreenSize from '../Hooks/useScreenSize';
 import { Constants, colors } from '../Utilities/Constants';
+import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
+import { useAppSelector } from '../Redux/hooks';
+import { useDispatch } from 'react-redux';
+import { ItemType } from 'antd/es/menu/hooks/useItems';
+import { signOut } from 'firebase/auth';
+import { auth } from '../Firebase/firebase';
+import { changeLoggedIn } from '../Redux/features/account/account-slice';
+import { useNavigate } from 'react-router-dom';
 
 const { Header } = Layout;
 
 const CustomHeader: React.FC = () => {
   const screenSize = useScreenSize();
+  const loggedIn = useAppSelector((state) => state.account.loggedIn);
+  const [api, contextHolder] = message.useMessage();
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const menuItem: ItemType = {
+    key: 'logout',
+    label: 'Logout',
+    icon: <LogoutOutlined />,
+    onClick: async () => {
+      try {
+        await signOut(auth);
+        api.success('Log Out Successful');
+        dispatch(changeLoggedIn(false));
+        navigate('/');
+      } catch (error) {
+        api.error('Log Out Failed');
+      }
+    }
+  };
+
+  const items: MenuProps['items'] = [menuItem];
+
   return (
-    <Header
-      style={{
-        height: '100px',
-        background: colors.bg,
-        borderBottom: '1px solid black'
-      }}
-    >
-      <Row
-        gutter={screenSize.width < Constants.breakpoint ? 10 : 0}
-        justify={'center'}
-        style={{ height: '100%' }}
+    <>
+      {contextHolder}
+      <Header
+        style={{
+          height: '100px',
+          background: colors.bg,
+          borderBottom: '1px solid lightgray'
+        }}
       >
-        <Col xs={24} sm={23}>
-          <Row
-            style={{ height: '100%' }}
-            justify={'space-between'}
-            align={'middle'}
-          >
-            <Col>
-              <Typography.Title
-                level={screenSize.width < Constants.breakpoint ? 5 : 2}
-                style={{
-                  margin: 0
-                }}
-              >
-                Climax Remote Management
-              </Typography.Title>
-            </Col>
-            <Col>
-              <Button>out</Button>
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-    </Header>
+        <Row
+          gutter={screenSize.width < Constants.breakpoint ? 10 : 0}
+          justify={'center'}
+          style={{ height: '100%' }}
+        >
+          <Col xs={24} sm={23}>
+            <Row
+              style={{ height: '100%' }}
+              justify={'space-between'}
+              align={'middle'}
+            >
+              <Col span={20}>
+                <Typography.Title
+                  level={screenSize.width < Constants.breakpoint ? 5 : 2}
+                  style={{
+                    margin: 0,
+                    color: colors.gray
+                  }}
+                >
+                  Climax <span style={{ color: colors.orange }}>Remote</span>{' '}
+                  Management
+                </Typography.Title>
+              </Col>
+              <Col span={4}>
+                {loggedIn && (
+                  <Row justify={'end'}>
+                    <Col>
+                      <Dropdown menu={{ items }}>
+                        <Avatar
+                          icon={<UserOutlined />}
+                          size={'large'}
+                          className='profile'
+                        />
+                      </Dropdown>
+                    </Col>
+                  </Row>
+                )}
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+      </Header>
+    </>
   );
 };