5htp 0.3.5 → 0.3.8

package/skeleton/src/client/pages/_messages/403.tsx

@@ -0,0 +1,43 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import { Router } from '@app';
+import { Button } from '@client/components';
+
+// App
+import useHeader from '@client/pages/useHeader';
+
+/*----------------------------------
+- CONTROLEUR
+----------------------------------*/
+Router.error( 403, {}, ({ data }) => {
+
+    useHeader({
+        title: 'Access Denied.',
+        subtitle: data.message
+    });
+
+    return (
+        <div class="card w-3-4 col pd-2">
+
+            <div class="col al-center">
+
+                <i src="times-circle" class="fg error xxl" />
+
+                <h1>Access Denied.</h1>
+
+                <p>{data.message}</p>
+
+            </div>
+
+            <Button type="primary" link="https://crosspathworkspace.slack.com/archives/C04L2TGR5J6">
+                Report to the dev team
+            </Button>
+        </div>
+    )
+});

package/skeleton/src/client/pages/_messages/404.tsx

@@ -0,0 +1,42 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import { Router } from '@app';
+import { Button } from '@client/components';
+
+// App
+import useHeader from '@client/pages/useHeader';
+
+/*----------------------------------
+- CONTROLEUR
+----------------------------------*/
+Router.error( 404, {}, ({ data }) => {
+
+    useHeader({
+        title: 'Page Not Found',
+        subtitle: data.message
+    });
+
+    return (
+        <div class="card w-3-4 col pd-2">
+
+            <div class="col al-center">
+
+                <i src="times-circle" class="fg error xxl" />
+
+                <h1>Page Not Found</h1>
+
+                <p>{data.message}</p>
+            </div>
+
+            <Button type="primary" link="https://crosspathworkspace.slack.com/archives/C04L2TGR5J6">
+                Report to the dev team
+            </Button>
+        </div>
+    )
+});

package/skeleton/src/client/pages/_messages/500.tsx

@@ -0,0 +1,42 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import { Router } from '@app';
+import { Button } from '@client/components';
+
+// App
+import useHeader from '@client/pages/useHeader';
+
+/*----------------------------------
+- CONTROLEUR
+----------------------------------*/
+Router.error( 500, {}, ({ data }) => {
+
+    useHeader({
+        title: 'Technical Error',
+        subtitle: data.message
+    });
+
+    return (
+        <div class="card w-3-4 col pd-2">
+
+            <div class="col al-center">
+
+                <i src="times-circle" class="fg error xxl" />
+
+                <h1>Technical Error</h1>
+
+                <p>{data.message}</p>
+            </div>
+
+            <Button type="primary" link="https://crosspathworkspace.slack.com/archives/C04L2TGR5J6">
+                Report to the dev team
+            </Button>
+        </div>
+    )
+});

package/skeleton/src/client/pages/platform/Header.less

@@ -0,0 +1,12 @@
+header.entityHeader {
+
+    /*main > &:first-child {
+        margin-top: -@spacing;
+    }*/
+
+    i.logo {
+        margin-bottom: -3em;
+        position: absolute;
+    }
+
+}

package/skeleton/src/client/pages/platform/Header.tsx

@@ -0,0 +1,119 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { ComponentChild } from 'preact';
+
+// Core
+import { Logo, Button } from '@client/components';
+import useContext from '@/client/context';
+
+// Resources
+import './Header.less';
+import LogoImg from '@/client/assets/identity/logo.svg';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+type TMeta = {
+    label: ComponentChild,
+    class?: string,
+    value: ComponentChild,
+}
+
+export type Props = {
+    title: ComponentChild,
+    logo?: ComponentChild
+    image?: string,
+    color?: string,
+    entity?: string,
+
+    align?: 'center' | 'bottom',
+   
+    metas?: TMeta[],
+    class?: string,
+    children?: ComponentChild
+}
+
+/*----------------------------------
+- COMPONENT
+----------------------------------*/
+export default function Header({ 
+    title, logo, image, color, entity,
+    align, children,
+    metas, class: className 
+}: Props) {
+
+    const context = useContext();
+
+    return (
+        <header class={
+            "entityHeader card pd-05 bg img col h-1-a sp-0 " + 
+            (color ? 'colorize' : 'blur') + 
+            ' ' + (className || '')
+        } style={{
+            backgroundColor: '#' + (color || 'efefef'),
+            backgroundImage: image
+                ? 'url(' + image + ')'
+                : undefined
+        }}>
+
+            <div id="mobileBtns" class="row sp-btw">
+
+                <Button icon="bars" size="s" id='navMenuBtn' shape='icon' 
+                    onClick={() => context.setOpenMenu('navig')} />
+
+                <img class="logo l" src={LogoImg} />
+
+                <Button icon="user" size="s" id='userMenuBtn' shape='icon' 
+                    onClick={() => context.setOpenMenu('user')} />
+            </div>
+
+            {children ? (
+                <div class="col row-1 pdh-1 pdb-2">
+
+                    {children}
+
+                </div>
+            ) : (
+                <div class="row row-1 pdh-1 pdb-2">
+    
+                    <h1>{title}</h1>
+    
+                </div>
+            )}
+
+            {/*logo ? (
+                <div class="entity row">
+                    {typeof logo === 'string' 
+                        ? <Logo src={logo} size="xl" /> 
+                        : logo}
+        
+                    {entity && (
+                        <strong class="coverTitle">
+                            {entity}
+                        </strong>
+                    )}
+
+                    <h1 class="mainTitle">{title}</h1>
+                </div>
+            ) : (
+                <h1 class="mainTitle row-1">{title}</h1>
+            )*/}
+    
+            {metas && (
+                <ul class="row fill al-top">
+                    {metas.map(({ label, value, class: className }) => (
+                        <li class={"col al-left txt-left sp-05"}>
+                            {label}
+                            <strong class={className}>{value}</strong>
+                        </li>
+                    ))}
+                </ul>
+            )}
+
+        </header>
+    )
+}

package/skeleton/src/client/pages/platform/_layout/index.less

@@ -0,0 +1,118 @@
+@import (reference) "@/client/assets/vars.less";
+
+#layout.dashboard {
+
+    /*----------------------------------
+    - LAYOUT
+    ----------------------------------*/
+
+    > .center {
+
+        min-height: 100vh;
+        max-width: @layoutWidth;
+        width: 100%;
+        margin: 0 auto;
+        gap: 0;
+
+        > * {
+            padding: 0.5em 1em;
+        }
+    }
+
+    #sidebar,
+    #user {
+        > .col {
+            position: sticky;
+            top: @spacing;
+        }
+    }
+
+    #sidebar {
+        flex: 0 0 @navigSidebarWidth;
+        width: @navigSidebarWidth; // For mobile mode = absolute display
+        display: flex;
+        border-right: solid 1px #e5e5e5;
+
+        max-height: 100vh;
+        position: sticky;
+        top: 0;
+
+        #userMenuBtn {
+            position: absolute;
+            top: @spacing;
+            right: @spacing;
+            z-index: 2;
+        }
+
+        #identity {
+
+            // Align with the space top menu
+            height: @sizeComponent;
+
+            img.logo {
+                flex: 0 0 3em;
+            }
+        }
+    }   
+    
+    #page {
+        flex: 1;
+
+        > header {
+
+            img.logo {
+                height: 48px;
+            }
+
+        }
+
+        > main {
+            padding-bottom: 20em;
+        }
+    }
+
+    #user {
+        flex: 0 0 @userSidebarWidth;
+        width: @userSidebarWidth; // For mobile mode = absolute display
+        border-left: solid 1px #e5e5e5;
+    }
+
+    .page {
+
+        display: flex;
+        flex-direction: column;
+        gap: 2em;
+        padding-bottom: 15vh;
+
+        > * {
+            + * {}
+        }
+    }
+
+    /*----------------------------------
+    - COMPONENT
+    ----------------------------------*/
+
+    h2 {
+        text-align: left;
+        //color: var(--cTxtDesc);
+    }
+}
+
+@import "./mobile.less";
+
+#loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    background: fade(#fff, 50%);
+    //backdrop-filter: blur(10px);
+    z-index: 998;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh
+}

package/skeleton/src/client/pages/platform/_layout/index.tsx

@@ -0,0 +1,131 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { ComponentChild } from 'preact';
+import { useErrorBoundary } from 'preact/hooks';
+
+// Core
+import useContext, { ClientContext } from '@/client/context';
+
+// Core components
+import RouterComponent from '@client/services/router/components/router';
+import { Button, Popover } from '@client/components';
+
+// Resources
+import "./index.less";
+import Logo from '@/client/assets/identity/logo.svg';
+
+/*----------------------------------
+- COMPOSANT
+----------------------------------*/
+export default function App ({ context, menu }: { 
+    context: ClientContext,
+    menu: ComponentChild
+ }) {
+
+    const { Router, api, user } = context;
+
+    const [openMenu, setOpenMenu] = React.useState<'user'|'navig'>();
+
+    const userMenuState = React.useState(false);
+
+    context.setOpenMenu = setOpenMenu;
+
+    useErrorBoundary( e => {
+        console.error("An error occurred.", e);
+    });
+
+    const logout = () => api.post('/auth/logout').then(() => {
+        Router.go('https://becrosspath.com');
+    })
+
+    if (user === null)
+        return (
+            <div class="row pd-3">
+                <div class="card w-3-4 col al-center pd-2">
+
+                    <i src="times-circle" class="fg error xxl" />
+
+                    <h1>Authentication Required</h1>
+                </div>
+            </div>
+        )
+
+    return (
+        <div id="layout" class={"dashboard" + (openMenu ? ' ' + openMenu + 'MenuOpen' : '')}
+            onClick={(e) => {
+                if (openMenu && e.target?.id === 'page')
+                    setOpenMenu(null)
+            }}>
+            <div class="center row al-fill">
+
+                <header id="sidebar">
+
+                    <div class="col al-fill">
+                        <div id="identity" class="row">
+                            <img class="logo l" src={Logo} />
+                            <div class="col col-1 al-left sp-0">
+                                <strong>CrossPath</strong>
+                                CSM ©
+                            </div>
+                        </div>
+
+                        <nav class="row-1">
+                            <ul class="menu col al-top">
+                                <Button nav="exact" link="/" icon="home-alt">
+                                    Overview
+                                </Button>
+                                <Button link="/missions" icon="bullseye">
+                                    Missions
+                                </Button>
+                                <Button link="/headhunters" icon="search">
+                                    Headhunters
+                                </Button>
+                                <Button link="/clients" icon="dollar-sign">
+                                    Clients <span class="badge s bg info">Soon</span>
+                                </Button>
+                                <Button link="/candidates" icon="users">
+                                    Candidates <span class="badge s bg info">Soon</span>
+                                </Button>
+                                <Button link="/system" icon="cog">
+                                    System <span class="badge s bg info">Soon</span>
+                                </Button>
+                            </ul>
+                        </nav>
+
+                        <ul class="menu col">
+                            <li>
+                                <Button shape="icon" icon="bell" onClick={() => toast.info("This feature is coming soon!")} />
+                            </li>
+                            <li>
+                                <Button shape="icon" icon="comment-alt-lines" onClick={() => toast.info("This feature is coming soon!")} />
+                            </li>
+                            <li>
+                                <Popover state={userMenuState} content={(
+                                    <ul class="col menu">   
+                                        <li class="col sp-0 al-left">
+                                            Logged as <strong>{user.name}</strong>
+                                        </li>
+                                        <li>
+                                            <Button icon="power-off" async onClick={logout}>Logout</Button>
+                                        </li>
+                                    </ul>
+                                )}>
+                                    <i class="logo mgv-1" style={{
+                                        background: 'url(https://recruiters.becrosspath.com/hub/team/' + user.slug + '/photo.webp)'
+                                    }} />
+                                </Popover>
+                            </li>
+                        </ul>
+                    </div>
+
+                </header>
+
+                <RouterComponent service={Router} />
+            </div>
+        </div>
+    )
+}

package/skeleton/src/client/pages/platform/_layout/mobile.less

@@ -0,0 +1,114 @@
+@import (reference) "@/client/assets/vars.less";
+
+#layout.dashboard {
+
+    // Minimize sidebar
+    @media only screen and (max-width: 1500px) and (min-width: 600px) {
+
+        #sidebar {
+            flex: 0 0 7em;
+
+            #identity > img + div {
+                display: none;
+            }
+
+            .menu a .label {
+                display: none;
+            }
+
+            .card.bg.blur {
+                display: none;
+            }
+        }
+    }
+
+    // Hide mobile display buttons when no mobile mode
+    @media only screen and (min-width: 900px) {
+        #mobileBtns {
+            visibility: hidden;
+        }
+    }
+
+    // Enter mobile mode: mobile buttons + slideable page
+    @media only screen and (max-width: 900px) {
+
+        #page {
+            z-index: 1;
+            background: #F5F5F5;
+            transition: transform .2s ease-out;
+        }
+
+        &.userMenuOpen,
+        &.navigMenuOpen {
+            #page {
+                box-shadow: 0 0 40px fade(#000, 20%);
+                
+                &::after {
+                    content: ' ';
+                    background: fade(#F5F5F5, 50%);
+                    backdrop-filter: blur(10px);
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    z-index: 5;
+                }
+            }
+        }
+    }
+
+    // Autohide user sidebar
+    @media only screen and (max-width: 900px) {
+                
+        #user {
+            position: fixed;
+            z-index: 0;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            overflow: auto;
+            opacity: 0;
+            transition: opacity .2s linear;
+        }
+
+        &.userMenuOpen {
+
+            #page {
+                @userMenuOpenGap: @userSidebarWidth + 2em;
+                transform: ~"translateX(-@{userMenuOpenGap})";
+            }
+
+            #user {
+                opacity: 1;
+            }
+        }
+    }
+
+    // Autohide navig sidebar
+    @media only screen and (max-width: 600px) {
+                
+        #sidebar {
+            position: fixed;
+            z-index: 0;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            overflow: auto;
+            opacity: 0;
+            transition: opacity .2s linear;
+        }
+
+        &.navigMenuOpen {
+            #page {
+                @navigMenuOpenGap: @navigSidebarWidth + 2em;
+                transform: ~"translateX(@{navigMenuOpenGap})";
+            }
+
+            #sidebar {
+                opacity: 1;
+            }
+        }
+
+    }
+}

package/skeleton/src/client/pages/platform/_page.tsx

@@ -0,0 +1,54 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { ComponentChild } from 'preact';
+import { useState } from 'preact/hooks';
+
+// Core
+import useContext from '@/client/context';
+import { Button, Popover, CircularProgressbar, Logo } from '@client/components';
+import useHeader, { Props as useHeaderProps } from '@client/pages/useHeader';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+export type Props = { 
+    children: ComponentChild,
+    navigation?: ComponentChild,
+    sidebar?: ComponentChild
+} & useHeaderProps
+
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+export default ({ children, navigation, sidebar, ...useHeaderProps }: Props) => {
+
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+
+    const { user, api, Router, toast, modal } = useContext();
+
+    useHeader(useHeaderProps);
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    return <>
+        <div id="page" class="col al-top">
+            <main class="col">
+
+                {children}
+
+            </main>
+        </div>
+    </>
+}