5htp 0.3.8 → 0.4.0

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

@@ -1,119 +0,0 @@
-/*----------------------------------
-- 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

@@ -1,118 +0,0 @@
-@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

@@ -1,131 +0,0 @@
-/*----------------------------------
-- 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

@@ -1,114 +0,0 @@
-@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

@@ -1,54 +0,0 @@
-/*----------------------------------
-- 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>
-    </>
-}

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

@@ -1,88 +0,0 @@
-/*----------------------------------
-- DEPENDANCES
-----------------------------------*/
-
-// Npm
-import React from 'react';
-import dayjs from 'dayjs';
-
-// Core
-import { Router } from '@app';
-import { Button, Table } from '@client/components';
-
-// App components
-import Header from '@/client/pages/platform/Header';
-
-// App
-import Page from '../_page';
-
-/*----------------------------------
-- TYPES
-----------------------------------*/
-
-import type { Headhunter } from '@/server/models';
-
-/*----------------------------------
-- CONTROLEUR
-----------------------------------*/
-Router.page('/headhunters', ({ api, modal, toast }) => {
-
-    /*----------------------------------
-    - INIT
-    ----------------------------------*/
-
-    const { headhunters } = api.fetch({
-        headhunters: api.get<Headhunter[]>('/headhunters'),
-    });
-
-    /*----------------------------------
-    - ACTIONS
-    ----------------------------------*/
-
-    const loginAs = (h: Headhunter) => modal.confirm(
-        `Login?`,
-        `Do you want to login on platform with ${h.name}'s account?`
-    ).then( shouldOpen => shouldOpen && 
-        Router.go('@recruiters/admin/headhunters/' + h.airtableId + '/login')
-    );
-
-    /*----------------------------------
-    - RENDER
-    ----------------------------------*/
-    return (
-        <Page title="CrossPath - CSM Dashboard">
-
-            <Header title={<>
-                Headhunters
-            </>} />
-
-            <Table className="card" data={headhunters} columns={(h) => ([{
-                label: "Name", 
-                cell: h.name
-            },{
-                label: "Signup", 
-                cell: dayjs(h.created).format('DD/MM/YYYY HH:mm')
-            },{
-                label: "Last Active", 
-                cell: dayjs(h.activity).format('DD/MM/YYYY HH:mm')
-            },{
-                label: "Quality of sourcing", 
-                cell: '--'
-            },{
-                label: "Time to source", 
-                cell: '--'
-            },{
-                label: "Actions", 
-                cell: (
-                    <div class='row sp-05 al-right'>
-
-                        <Button size="s" icon="key" 
-                            title="Login as this headhunter"
-                            onClick={() => loginAs(h)} />
-                    </div>
-                )
-            }])} />
-            
-        </Page>
-    )
-});

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

@@ -1,58 +0,0 @@
-/*----------------------------------
-- DEPENDANCES
-----------------------------------*/
-
-// Npm
-import React from 'react';
-import dayjs from 'dayjs';
-
-// Core
-import { Router } from '@app';
-import { Button, Table } from '@client/components';
-import { hello } from '@common/data/chaines/greetings';
-
-// App components
-import Header from '@/client/pages/platform/Header';
-
-// App
-import Page from './_page';
-
-/*----------------------------------
-- TYPES
-----------------------------------*/
-
-import type { AcceptedMission, Mission } from '@/server/models';
-
-export type TApplicationAction = 'approve'|'reject'
-
-/*----------------------------------
-- CONTROLEUR
-----------------------------------*/
-Router.page('/', ({ user, api, modal, toast }) => {
-
-    /*----------------------------------
-    - INIT
-    ----------------------------------*/
-
-
-    /*----------------------------------
-    - ACTIONS
-    ----------------------------------*/
-
-
-    /*----------------------------------
-    - RENDER
-    ----------------------------------*/
-    return (
-        <Page title="CrossPath - CSM Dashboard">
-
-            <Header title={<>
-                {hello()}, {user.name}!<br/>
-                Let's bring Cross Path to the stars 🔥
-            </>} />
-
-            Page to be done
-            
-        </Page>
-    )
-});