@gnar-engine/cli 1.0.0 → 1.0.2

package/bootstrap/services/portal/src/features/subscriptionSchedule/SubscriptionSchedule.jsx

@@ -0,0 +1,44 @@
+const SubscriptionSchedule = ({subscription, onChange, formData}) => {
+
+    return (
+        <div className="card">
+            <div className='card-header'>
+                <h2>Subscription Schedule</h2>
+            </div>
+            <div className='card-content'>
+                <div className="subscription-schedule-cont">
+                    <div className="subscription-schedule-body">
+                        {subscription ? (
+                            <div>
+                                <p><strong>Payment Interval:</strong> {subscription.paymentInterval.interval}</p>
+                                <p><strong>Interval Count:</strong> {subscription.paymentInterval.intervalCount}</p>
+                                <p><strong>Trial Period:</strong> {subscription.trialPeriodDays || '0'}</p>
+                                <p><strong>Next Payment Date:</strong>
+                                    <input 
+                                        type="text" 
+                                        name="billingNextScheduled" 
+                                        value={formData.billingNextScheduled || ''} 
+                                        onChange={(e) => onChange(e)} 
+                                    />
+                                </p>
+
+                                <p><strong>Retry attempt</strong>
+                                    <input 
+                                        type="number" 
+                                        name="retryAttempt" 
+                                        value={formData.retryAttempt || 0} 
+                                        onChange={(e) => onChange(e)} 
+                                    />
+                                </p>
+                            </div>
+                        ) : (
+                            <p>No subscription details available.</p>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default SubscriptionSchedule;

package/bootstrap/services/portal/src/features/taxonomyFormRow/TaxonomyFormRow.jsx

@@ -0,0 +1,32 @@
+import bin from '../../assets/bin.svg';
+import CustomSelect from '../../ui/customSelect/CustomSelect';
+
+const TaxonomyFormRow = ({ item, onChange, remove }) => {
+
+
+    return (
+        <div className='form-row'>
+            <CustomSelect 
+                name="taxonomy"
+                placeholder="Select taxonomy"
+                options="TBC"
+                labelKey="taxonomy"
+                setSelectedOption="TBC"
+                selectedOption="TBC"
+            />
+            <CustomSelect 
+                name="value"
+                placeholder="Select terms"
+                options="TBC"
+                labelKey="value"
+                setSelectedOption="TBC"
+                selectedOption="TBC"
+            />
+
+            <button className='bin-icon' onClick={remove}><img src={bin} alt="" /></button>
+        </div>
+    )
+}
+
+
+export default TaxonomyFormRow;

package/bootstrap/services/portal/src/features/user/User.jsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { logout } from '../../slices/authSlice';
+import userIcon from '../../assets/user.svg';
+
+
+const User = () => {
+
+    const user = useSelector(state => state.auth.authUser);
+    const authState = useSelector(state => state.auth);
+    const dispatch = useDispatch();
+    const [userInitials, setUserInitials] = useState('?');
+
+    useEffect(() => {
+        if (user?.name) {
+            const initials = user.name.split(' ').map(name => name.charAt(0)).join('');
+            setUserInitials(initials);
+        }
+    }, [user]);
+
+    const handleLogout = () => {
+        dispatch(logout());
+    };
+
+    useEffect(() => {
+
+        console.log('Redux auth state:', authState);
+
+    }, [user]);
+    
+    
+
+    return (
+        <div className="user-avatar-container">
+            <div className="user-info">
+                <div className="userAvatar">
+                    <span><img src={userIcon} alt="user icon" /></span>
+                </div>
+
+                {user && user.username && (
+                    <div className="userName">
+                        <span>{user.username}</span>
+                    </div>
+                )}
+
+                {user && (
+                    <a onClick={handleLogout} className="log-out">Log out</a>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default User;

package/bootstrap/services/portal/src/features/user/user.less

@@ -0,0 +1,57 @@
+.user-avatar-container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: flex-end;
+    padding-bottom: 10px;
+
+    .user-info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .userAvatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border: 2px solid #37936B;
+            background: @green-1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+    
+            span {
+                text-transform: uppercase;
+                font-size: 18px;
+                font-weight: 400;
+                color: @green-1;
+
+                img {
+                    width: 30px;
+                    height: 30px;
+                }
+            }
+        }
+    
+        span {
+            color: @green-1;
+            font-size: 14px;
+        }
+    
+        .log-out {
+            color: @dark-1;
+            transition-duration: 0.4s;
+    
+            &:hover {
+                cursor: pointer;
+                opacity: 0.9;
+            }
+        }
+
+
+
+    }
+
+
+}

package/bootstrap/services/portal/src/includes/utilities.js

@@ -0,0 +1,259 @@
+
+import { mainAreasOfMaths } from '../data/data';
+
+/**
+ * Calculate the total level from the levels
+ * 
+ * @param {array} levels 
+ * @param {int} startsAt 
+ */
+export const calcTotalLevel = (levels, startsAt) => {
+
+    if (!levels || levels.length == 0) {
+        levels = [0,0,0,0,0,0];
+    }
+    
+    let newTotalLevel = levels.reduce((acc, level, i) => {
+        if (startsAt > 0 && i + 1 < startsAt) {
+            return acc;
+        }
+        if (level == '' || level == null) {
+            return acc;
+        }
+        return parseFloat(acc) + parseFloat(level);
+    }, 0);
+
+    if (newTotalLevel > 0 && startsAt) {
+        newTotalLevel = newTotalLevel + (startsAt - 1);
+    }
+
+    return newTotalLevel;
+}
+
+
+/**
+ * Calculate assessment areas with intervention
+ * 
+ * @param {object} currentPeriod
+ * @param {object} previousPeriod
+ * @return {array} assessmentAreas
+ */
+export const calcAreasWithIntervention = (currentPeriod, previousPeriod) => {
+
+    const areas = [];
+
+    return areas;
+}
+
+
+/**
+ * Calculate the period prior to the current period
+ * 
+ * @param {array} periods
+ * @param {object} currentPeriod
+ */
+export const calcPreviousPeriod = (periods, currentPeriod) => {
+    
+    let previousPeriod = null;
+
+    periods.forEach((period, i) => {
+        if (period.period_id == currentPeriod.period_id) {
+            previousPeriod = periods[i - 1];
+        }
+    });
+
+    return previousPeriod;
+}
+
+
+/**
+ * Calculate bundles with intervention
+ * 
+ * @param {object} currentBundleProgress
+ * @param {object} previousBundleProgress
+ * @return {array} bundles
+ */
+export const calcBundlesWithIntervention = (currentBundleProgress, previousBundleProgress) => {
+
+    const bundles = [];
+
+    Object.keys(currentBundleProgress).forEach((levelKey, i) => {
+        Object.keys(currentBundleProgress[levelKey]).forEach((bundleKey, j) => {
+
+            let currentPeriodBundle = currentBundleProgress[levelKey][bundleKey];
+            let previousPeriodBundle = previousBundleProgress[levelKey][bundleKey];
+
+            if (currentPeriodBundle.completed == 'complete' && previousPeriodBundle.completed !== 'complete') {
+                const levelLabel = levelKey.replace('level-', 'Level ');
+                currentPeriodBundle.levelLabel = levelLabel;
+                bundles.push(currentPeriodBundle);
+            }
+        });
+    });
+
+    return bundles;
+}
+
+
+/**
+ * Calculate assessment average score
+ * 
+ * @param {object} assessment
+ * @return {float} averageScore
+ */
+export const calcAssessmentAverageScore = (assessment, selectedSubject = 'maths_all_areas') => {
+
+    if (!assessment) {
+        return 0;
+    }
+
+    // parse if it's a string
+    if (typeof assessment === 'string') {
+        assessment = JSON.parse(assessment);
+    }
+
+    let totalScore = 0;
+    let totalAreas = 0;
+
+    Object.keys(assessment).forEach((areaKey) => {
+        assessment[areaKey].topics.forEach((topic) => {
+
+            // skip some areas if it's maths main areas
+            if (selectedSubject == 'maths_main_areas') {
+                console.log('maths main areas', areaKey);
+                if (!mainAreasOfMaths.includes(areaKey)) {
+                    return;
+                }
+            }
+
+            const thisScore = parseFloat(calcTotalLevel(topic.level, topic['starts-at']));
+
+            if (thisScore) {
+                totalAreas++;
+                totalScore = totalScore + thisScore;
+            }
+        });
+    });
+
+    let average = totalScore / totalAreas;
+
+    // round to 1 decimal place
+    average = Math.round(average * 10) / 10;
+
+    return average;
+}
+
+/**
+ * Calculate assessment average score
+ * 
+ * @param {object} assessment
+ * @return {float} averageScore
+ */
+export const calcNumbersAreaAverageScore = (assessment) => {
+
+    const numberAreaKeys = mainAreasOfMaths;
+
+    if (!assessment) {
+        return 0;
+    }
+
+    // parse if it's a string
+    if (typeof assessment === 'string') {
+        assessment = JSON.parse(assessment);
+    }
+
+    let totalScore = 0;
+    let totalAreas = 0;
+
+    Object.keys(assessment).forEach((areaKey) => {
+        if (!numberAreaKeys.includes(areaKey)) {
+            return;
+        }
+
+        assessment[areaKey].topics.forEach((topic) => {
+            const thisScore = parseFloat(calcTotalLevel(topic.level, topic['starts-at']));
+
+            if (thisScore) {
+                totalAreas++;
+                totalScore = totalScore + thisScore;
+            }
+        });
+    });
+
+    let average = totalScore / totalAreas;
+
+    // round to 1 decimal place
+    average = Math.round(average * 10) / 10;
+
+    return average;
+}
+
+/**
+ * Calculate completeness of academic year intervention for a student
+ * 
+ * @param {array} periods
+ * @param {array} selectedPeriods
+ * @return {string} completeness (complete, partial, none)
+ */
+export const calcAcademicYearInterventionCompleteness = (periods, selectedPeriods) => {
+
+    let completeness;
+    let someWithIntervention = false;
+    let someWithoutIntervention = false;
+
+    // get the academic years in selected periods
+    // let selectedAcademicYears = [];
+
+    // selectedPeriods.forEach(selectedPeriod => {
+    //     if (!selectedAcademicYears.includes(selectedPeriod.academic_year)) {
+    //         selectedAcademicYears.push(selectedPeriod.academic_year);
+    //     }
+    // });
+
+    selectedPeriods.forEach((selectedPeriod) => {
+        periods.forEach(period => {
+            if (period.period_name == selectedPeriod.period_name && period.calendar_year == selectedPeriod.calendar_year) {
+                if (period.has_had_intervention == 1) {
+                    someWithIntervention = true;
+                } else {
+                    someWithoutIntervention = true;
+                }
+            }
+        });
+    });
+
+    if (someWithIntervention && someWithoutIntervention) {
+        completeness = 'partial';
+    } else if (someWithIntervention && !someWithoutIntervention) {
+        completeness = 'complete';
+    } else {
+        completeness = 'none';
+    }
+
+    return completeness;
+}
+
+
+/**
+ * Calculate if had some low attendance in selected periods
+ * 
+ * @param {array} periods
+ * @param {array} selectedPeriods
+ * @return {boolean} hadLowAttendance
+ */
+export const calcHadSomeLowAttendance = (periods, selectedPeriods) => {
+
+    let hadSomeLowAttendance = false;
+
+    periods.forEach((period) => {
+        selectedPeriods.forEach((selectedPeriod) => {
+            if (period.period_name == selectedPeriod.period_name && period.academic_year == selectedPeriod.academic_year) {
+                if (period.attendance == 'low') {
+                    hadSomeLowAttendance = true;
+                }
+            }
+        });
+    })
+
+    return hadSomeLowAttendance;
+}

package/bootstrap/services/portal/src/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { Provider } from 'react-redux';
+import store from './store/configureStore';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </React.StrictMode>
+);

package/bootstrap/services/portal/src/layouts/CrudLayout.jsx

@@ -0,0 +1,50 @@
+import React, {useEffect} from "react";
+import {useLocation, useNavigate} from 'react-router-dom';
+
+
+const CrudLayout = ({children, view, setView, selectedSingleItemId, setSelectedSingleItemId}) => {
+
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        // if there is no current ?view in the url, set it to list
+        // if (!location.search) {
+        //     navigate("?view=list", {replace: true});
+        // }
+
+        if (view === 'list') {
+          navigate("?view=list", {replace: false});
+        } else if (view === 'single' && selectedSingleItemId) {
+          navigate(`?view=single&id=${selectedSingleItemId}`, {replace: false});
+        } else if (view === 'single') {
+          navigate("?view=single", {replace: false});
+        }
+    }, [view]);
+
+    // set view and selected id from url
+    useEffect(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const view = urlParams.get('view');
+        const id = urlParams.get('id');
+
+        if (view === 'list') {
+            setView('list')
+        } else if (view === 'single' && id) {
+            setView('single')
+            setSelectedSingleItemId(id);
+        } else if (view === 'single') {
+            setView('single')
+        } else {
+            setView('list')
+        }
+    }, [location]);
+
+    return (
+        <>
+            {children}
+        </>
+    )
+}
+
+export default CrudLayout;

package/bootstrap/services/portal/src/layouts/LoginLayout.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+function LoginLayout({children}) {
+
+    return (
+        <div className="login-layout">
+            <div className="left-cont">
+                <img src={require('../assets/Logo_Anchord_White_Green.svg').default} alt="Anchord Logo" />
+            </div>
+            <div className="right-cont">
+                {children}
+            </div>
+        </div>
+    );
+}
+
+export default LoginLayout;

package/bootstrap/services/portal/src/layouts/PortalLayout.jsx

@@ -0,0 +1,48 @@
+import React, {useEffect} from "react";
+import { useLocation } from "react-router";
+import Sidebar from "../features/sidebar/Sidebar";
+import User from "../features/user/User";
+import { Link } from "react-router-dom";
+import "react-datepicker/dist/react-datepicker.css";
+
+const PortalLayout = ({children}) => {
+
+    const location = useLocation();
+
+    useEffect(() => {
+        console.log(location);
+    }, [location]);
+
+
+    return (
+        <div className="portal-layout">
+
+            <div className="header">
+                <div className="content-wrap">
+                    <div className="content">
+                    </div>
+                </div>
+            </div>
+        
+            <div className="main">
+                <div className="content-wrap">
+                    <div className="content">
+                        <Sidebar />
+                        <div className="main-page">
+                            <div className="header-details">
+                                <Link to="/portal/" className="header-logo">
+                                    <img src={require('../assets/Logo_Anchord_Black.svg').default} alt="Gnar Engine" className="header-logo" />
+                                </Link>
+                                <User />
+                            </div>
+                            {children}
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
+        </div>
+    );
+}
+
+export default PortalLayout;

package/bootstrap/services/portal/src/layouts/loginLayout.less

@@ -0,0 +1,33 @@
+.login-layout {
+    min-height: 100vh;
+    background: @dark-grey-1;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+
+    .left-cont {
+        min-width: 50%;
+        max-width: 50%;
+        min-height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+            max-width: 60%;
+            min-width: 60%;
+        }
+    }
+    .right-cont {
+        background: @grey-light-1;
+        min-height: 100%;
+        min-width: 50%;
+        max-width: 50%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex-wrap: nowrap;
+        padding: 50px;
+        box-sizing: border-box;
+    }
+}

package/bootstrap/services/portal/src/layouts/portalLayout.less

@@ -0,0 +1,67 @@
+.portal-layout {
+    min-height: 101vh;
+    background: linear-gradient(to right, #E7E7E7 0%, #E7E7E7 49%, #f7f7f7 51%, #f7f7f7 100%);
+
+    .header {
+        background: @dark-grey-1;
+        height: 30px;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .content-wrap {
+            max-height: 100%;
+        }
+        .content {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            max-height: 100%;
+            align-items: center;
+        }
+    }
+
+    .main {
+        min-height: calc(100vh - 197px);
+        position: relative;
+
+        .content-wrap,
+        .content {
+            height: 100%;
+            min-height: 100%;
+        }
+        .content {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+        }
+
+        .main-page {
+            background: #f7f7f7;
+            width: 100%;
+            height: 100%;
+            min-height: calc(100vh - 100px);
+            padding: 30px 40px;
+
+            .header-details {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                padding-bottom: 20px;
+            }
+
+            .header-logo {
+                max-height: 100%;
+                width: 180px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+    }
+}