@gnar-engine/cli 1.0.0 → 1.0.1

package/bootstrap/services/portal/src/pages/subscriptions/Subscriptions.jsx

@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from "react";
+import CrudLayout from "../../layouts/CrudLayout";
+import gnarEngine from "@gnar-engine/js-client";
+import CustomSelect from "../../ui/customSelect/CustomSelect";
+import arrow from '../../assets/arrow.svg';
+import CrudSubscriptionList from "../../features/crudSubscription/CrudSubscriptionList";
+import CrudSubscriptionSingle from "../../features/crudSubscription/CrudSubscriptionSingle";
+
+const Subscriptions = () => {
+
+    const [view, setView] = useState("list");
+    const [selectedSingleItemId, setSelectedSingleItemId] = useState(null);
+    const [selectedSubscription, setSubscription] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [selectedAction, setSelectedAction] = useState(null);
+    const [selectedSubscriptionIds, setSelectedSubscriptionIds] = useState(new Set());
+    const [subscriptions, setSubscriptions] = useState([]);
+    const [message, setMessage] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+
+
+    const fetchSubscriptions = async () => {
+        try {
+            const data = await gnarEngine.subscription.getSubscriptions();
+            console.log('data:', data);
+
+            const subscriptionsList = data.subscriptions.map(order => ({
+                id: order._id,
+                firstName: order.billingAddress.firstName,
+                lastName: order.billingAddress.lastName,
+                date: new Date(order.createdAt).toLocaleDateString(),
+                status: order.status,
+                total: '£' + order.total?.toFixed(2),
+                createdAt: formatDate(order.createdAt),
+            }));
+
+            setSubscriptions(subscriptionsList);
+            setMessage(subscriptionsList.length > 0 ? '' : 'No subscriptions found');
+        } catch (error) {
+            console.error('Error fetching subscriptions:', error);
+            setSubscriptions([]);
+        }
+    }
+
+    useEffect(() => {
+        fetchSubscriptions();
+    }, []);
+
+    const formatDate = (isoString) => {
+        if (!isoString) return "N/A";
+    
+        const date = new Date(isoString);
+        if (isNaN(date.getTime())) return "N/A"; // Checks if the date is invalid
+    
+        return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')} at ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+    };
+    
+
+    const handleAddNew = () => {
+        setView("single");
+        setSelectedSingleItemId(null);
+        setSubscription(null);
+    }
+
+    const refreshSelectedSubscription = () => {
+        if (!selectedSingleItemId) {
+            return;
+        }
+        (async () => {
+            try {
+                const data = await gnarEngine.subscription.getSubscriptions(selectedSingleItemId);
+                setSubscription(data.subscription);
+            } catch (error) {
+                console.error('Error fetching subscription:', error);
+            }
+        })();
+    }
+
+    useEffect(() => {
+        (async () => {
+            if (!selectedSingleItemId) {
+                return;
+            }
+            try {
+                // fetch contact data
+                const data = await gnarEngine.subscription.getSubscription(selectedSingleItemId);
+                setSubscription(data.subscription);
+
+            } catch (error) {
+                console.error('Error fetching subscription:', error);
+            }
+        })();
+    }, [selectedSingleItemId]);
+
+    const handleAction = () => {
+        if (!selectedAction) {
+            alert("Please select an action first!");
+            return;
+        }
+    
+        if (selectedAction.id === "delete") {
+            handleDelete();
+        } else if (selectedAction.id === "export") {
+            console.log("Export action triggered");
+        }
+    };
+
+    const handleDelete = () => {
+        if (selectedSubscriptionIds.size === 0) {
+            alert("Please select a subscription to delete first!");
+            return;
+        }
+        if (!window.confirm(`Are you sure you want to delete ${selectedSubscriptionIds.size} subscription(s)?`)) {
+            return;
+        }
+        (async () => {
+            try {
+                for (const subscriptionId of selectedSubscriptionIds) {
+                    await gnarEngine.subscription.deleteSubscription(subscriptionId);
+                }
+                setSelectedSubscriptionIds(new Set());
+                setSelectedAction(null);
+                await fetchSubscriptions();
+            } catch (error) {
+                console.error('Error deleting subscription:', error);
+            }
+        })();
+    };
+
+    return (
+        <CrudLayout
+            view={view}
+            setView={setView}
+            selectedSingleItemId={selectedSingleItemId}
+            setSelectedSingleItemId={setSelectedSingleItemId}    
+        >
+            <div className="crud-page">
+
+                {view === "list" ? (
+                    <div className="crud-list-cont">
+                        <div className="crud-list-controls">
+                            <div className="controls-left-col">
+                                <button onClick={handleAddNew} className="add-new">Add new</button>
+                            </div>
+                            <div className="controls-right-col">
+                                <CustomSelect
+                                    name="filter-contacts"
+                                    placeholder="filter by"
+                                    options={[
+                                        { id: "all", name: "All" },
+                                        { id: "admin", name: "Admin" },
+                                        { id: "contact", name: "User" }
+                                    ]}
+                                    labelKey="name"
+                                    setSelectedOption={() => {}}
+                                    selectedOption={null}
+                                />
+                                <CustomSelect 
+                                    name="action"
+                                    placeholder="action"
+                                    options={[
+                                        { id: "delete", name: "Delete" },
+                                        // { id: "export", name: "Export" }
+                                    ]}
+                                    labelKey="name"
+                                    setSelectedOption={setSelectedAction}
+                                    selectedOption={selectedAction}
+                                />
+                                <button className="arrowButton" onClick={handleAction}><img src={arrow} alt="right arrow icon" /></button>
+                            </div>
+                        </div>
+                        <CrudSubscriptionList 
+                            setSelectedSingleItemId={setSelectedSingleItemId} 
+                            setView={() => setView('single')}
+                            selectedSubscriptionIds={selectedSubscriptionIds}
+                            setSelectedSubscriptionIds={setSelectedSubscriptionIds}
+                            subscriptions={subscriptions}
+                            message={message} 
+                        />
+                    </div>
+                ) : (
+                    <CrudSubscriptionSingle 
+                        loading={loading} 
+                        setLoading={setLoading} 
+                        subscription={selectedSubscription} 
+                        setView={() => setView('list')} 
+                        refreshSelectedSubscription={refreshSelectedSubscription} 
+                        setSubscription={setSubscription}
+                        fetchSubscriptions={fetchSubscriptions}
+                        setSelectedSingleItemId={setSelectedSingleItemId}
+                        formatDate={formatDate}
+                    />
+                )}
+            </div>
+        </CrudLayout>
+    );
+}
+
+export default Subscriptions;

package/bootstrap/services/portal/src/pages/users/Users.jsx

@@ -0,0 +1,193 @@
+import React, { useState, useEffect } from "react";
+import CrudLayout from "../../layouts/CrudLayout";
+import CrudUserList from '../../features/crudUser/CrudUserList';
+import CrudUserSingle from '../../features/crudUser/CrudUserSingle';
+import gnarEngine from "@gnar-engine/js-client";
+import CustomSelect from "../../ui/customSelect/CustomSelect";
+import arrow from '../../assets/arrow.svg';
+
+const ManageUsers = () => {
+
+    const [view, setView] = useState("list");
+    const [selectedSingleItemId, setSelectedSingleItemId] = useState(null);
+    const [selectedUser, setUser] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [selectedAction, setSelectedAction] = useState(null);
+    const [selectedUserIds, setSelectedUserIds] = useState(new Set());
+    const [users, setUsers] = useState([]);
+    const [message, setMessage] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const fetchUsers = async () => {
+        try {
+            const data = await gnarEngine.user.getMany();
+            const usersList = data.users.map(user => ({
+                id: user.id,
+                email: user.email,
+                username: user.username,
+                userRole: user.role,
+                createdAt: formatDate(user.createdAt),
+            }));
+            setUsers(usersList);
+            setMessage(usersList.length > 0 ? '' : 'No users found');
+        } catch (error) {
+            console.error('Error fetching users:', error);
+            setMessage('Error fetching users');
+            setUsers([]);
+        }
+    };
+
+    
+    useEffect(() => {
+        fetchUsers();
+    }, []);
+
+
+    const formatDate = (isoString) => {
+        if (!isoString) return "N/A";
+    
+        const date = new Date(isoString);
+        if (isNaN(date.getTime())) return "N/A"; // Checks if the date is invalid
+    
+        return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')} at ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+    };
+    
+
+    const handleAddNew = () => {
+        setView("single");
+        setSelectedSingleItemId(null);
+        setUser(null);
+    }
+
+    const refreshSelectedUser = (user) => {
+        setUser(user);
+    }
+
+    useEffect(() => {
+        (async () => {
+            if (!selectedSingleItemId) {
+                return;
+            }
+            try {
+                // fetch user data
+                const data = await gnarEngine.user.getUser(selectedSingleItemId);
+                setUser(data.user);
+
+            } catch (error) {
+                console.error('Error fetching user:', error);
+            }
+        })();
+    }, [selectedSingleItemId]);
+
+
+    const handleAction = () => {
+        if (!selectedAction) {
+            alert("Please select an action first!");
+            return;
+        }
+    
+        if (selectedAction.id === "delete") {
+            handleDelete();
+        } else if (selectedAction.id === "export") {
+            console.log("Export action triggered");
+        }
+    };
+    
+
+    const handleDelete = () => {
+        if (selectedUserIds.size === 0) {
+            alert("Please select at least one user to delete.");
+            return;
+        }
+    
+        if (!window.confirm(`Are you sure you want to delete ${selectedUserIds.size} user(s)?`)) {
+            return;
+        }
+    
+        (async () => {
+            try {
+                setLoading(true);
+                for (let userId of selectedUserIds) {
+                    await gnarEngine.user.delete(userId);
+                }
+                setSelectedUserIds(new Set()); 
+                setLoading(false);
+                await fetchUsers();
+            } catch (error) {
+                console.error('Error deleting users:', error);
+                setLoading(false);
+            }
+        })();
+    };
+    
+
+    return (
+        <CrudLayout
+            view={view}
+            setView={setView}
+            selectedSingleItemId={selectedSingleItemId}
+            setSelectedSingleItemId={setSelectedSingleItemId}    
+        >
+            <div className="crud-page">
+
+                {view === "list" ? (
+                    <div className="crud-list-cont">
+                        <div className="crud-list-controls">
+                            <div className="controls-left-col">
+                                <button onClick={handleAddNew} className="add-new">Add new</button>
+                            </div>
+                            <div className="controls-right-col">
+                                <CustomSelect
+                                    name="filter-users"
+                                    placeholder="filter by"
+                                    options={[
+                                        { id: "all", name: "All" },
+                                        { id: "admin", name: "Admin" },
+                                        { id: "user", name: "User" }
+                                    ]}
+                                    labelKey="name"
+                                    setSelectedOption={() => {}}
+                                    selectedOption={null}
+                                />
+                                <CustomSelect 
+                                    name="action"
+                                    placeholder="action"
+                                    options={[
+                                        { id: "delete", name: "Delete" },
+                                        // { id: "export", name: "Export" }
+                                    ]}
+                                    labelKey="name"
+                                    setSelectedOption={setSelectedAction}
+                                    selectedOption={selectedAction}
+                                />
+                                <button className="arrowButton" onClick={handleAction}><img src={arrow} alt="right arrow icon" /></button>
+                            </div>
+                        </div>
+                        <CrudUserList 
+                            setSelectedSingleItemId={setSelectedSingleItemId} 
+                            setView={() => setView('single')}
+                            selectedUserIds={selectedUserIds}
+                            setSelectedUserIds={setSelectedUserIds}
+                            users={users}
+                            message={message}
+                        />
+                    </div>
+                ) : (
+                    <CrudUserSingle 
+                        loading={loading} 
+                        setLoading={setLoading} 
+                        selectedUser={selectedUser} 
+                        setView={() => setView('list')} 
+                        refreshSelectedUser={refreshSelectedUser} 
+                        setUser={setUser}
+                        fetchUsers={fetchUsers}
+                        formatDate={formatDate}
+                        setSelectedSingleItemId={setSelectedSingleItemId}
+                    />
+                )}
+            </div>
+        </CrudLayout>
+    );
+}
+
+export default ManageUsers;

package/bootstrap/services/portal/src/pages/users/users.less

@@ -0,0 +1,25 @@
+.crud-page {
+    .crud-list-cont {
+        .crud-list-header {
+            text-align: right;
+        }
+
+        .crud-list-controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+
+            .controls-left-col {
+                display: flex;
+                gap: 20px;
+            }
+
+            .controls-right-col {
+                display: flex;
+                gap: 20px;
+            }
+        }
+
+    }
+}

package/bootstrap/services/portal/src/slices/authSlice.js

@@ -0,0 +1,71 @@
+import {createSlice, createAsyncThunk, createAction} from '@reduxjs/toolkit';
+import { getAuthToken, getAuthUser, setAuthToken, setAuthUser, removeAuthToken, removeAuthUser } from '@gnar-engine/js-client/src/storage';
+import gnarEngine from '@gnar-engine/js-client';
+
+
+export const login = createAsyncThunk('auth/login', async ({username, password}) => {
+
+    let response;
+
+    try {
+        response = await gnarEngine.user.authenticate(username, password);;
+    } catch (error) {
+        response = error.response;
+    }
+
+    return response;
+})
+
+export const logout = createAction('auth/logout');
+
+export const authSlice = createSlice({
+    name: 'auth',
+    initialState: {
+        authUser: getAuthUser() ? JSON.parse(getAuthUser()) : null,
+        accessToken: getAuthToken() ? getAuthToken() : '',
+        authLoading: false,
+        authError: ''
+    },
+    reducers: {
+    },
+    extraReducers: builder => {
+        builder
+            .addCase(login.pending, (state, action) => {
+                state.authLoading = true;
+                state.authError = '';
+            })
+            .addCase(login.fulfilled, (state, action) => {
+                state.authLoading = false;
+                state.authError = action.payload.data?.error ? action.payload.data.message : '';
+
+                if (action.payload.token) {
+                    state.accessToken = action.payload.token;
+                    state.authUser = action.payload.user;
+
+                    // store in local storage
+                    setAuthToken(action.payload.token);
+                    setAuthUser(JSON.stringify(action.payload.user));
+
+                    // redirect to portal
+                    window.location.href= '/portal';
+                } else {
+                    // Handle error case
+                    console.error('Login failed:', action.payload);
+                }
+            })
+            .addCase(logout, (state, action) => {
+                // Clear auth state
+                state.authUser = '';
+                state.accessToken = '';
+
+                // Remove from local storage
+                removeAuthToken();
+                removeAuthUser();
+
+                // Redirect to login page
+                window.location.href = '/login';
+            });
+    }
+})
+
+export default authSlice;

package/bootstrap/services/portal/src/store/configureStore.js

@@ -0,0 +1,12 @@
+import { configureStore } from '@reduxjs/toolkit';
+import authSlice from '../slices/authSlice';
+
+
+const store = configureStore({
+    
+    reducer: {
+        auth: authSlice.reducer
+    }
+})
+
+export default store;

package/bootstrap/services/portal/src/styles/global.less

@@ -0,0 +1,159 @@
+
+/* vars */
+
+@green-1: #479E78;
+@dark-grey-1: #434343;
+@mid-grey-1: #73768C;
+@orange-1: #E8896D;
+@orange-2: #EFA12C;
+@dark-1: #3C5063;
+@grey-light-1: #F6F8F9;
+@grey-mid-1: #E4E4E4;
+@grey-dark-1: #B3B3B3;
+@white: #FFFFFF;
+@red-1: #c73939;
+@red-2: #ffeeee;
+@green-2: #359E59;
+
+@content-width: 1550px;
+
+/* Fonts */
+
+// @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+body {
+    font-family: ubuntu, sans-serif;
+    color: @dark-1;
+    font-size: 14px;
+}
+
+/* Global styles */
+
+h1 {
+    margin-top: 0px;
+    font-size: 28px;
+    font-weight: 600;
+}
+h2 {
+    font-size: 15px;
+    font-weight: 500;
+}
+body {
+    margin: 0px;
+
+    &, #root {
+        min-height: 100vh;
+    }
+}
+
+.separator {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    height: 0px;
+    border-top: 1px solid @grey-mid-1;
+}
+.content-wrap {
+    display: flex;
+    justify-content: center;
+}
+.content {
+    width: 100%;
+    max-width: @content-width;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+.instruction {
+    font-size: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 20px;
+}
+.flex-row-end{
+    align-items: flex-end;
+}
+.form-cont {
+    width: 100%;
+    margin-bottom: 30px;
+}
+
+.full-width-select-cont,
+.full-width-select-cont .custom-select {
+    min-width: 100%;
+}
+.flex-row-select-cont {
+    min-width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 20px;
+
+    .custom-select {
+        width: 100%;
+        max-width: unset;
+    }
+}
+
+.flex-row-checkbox-cont {
+    min-width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 20px;
+
+    label {
+        display: inline-block;
+    }
+}
+
+.flex-row-buttons-cont {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 20px;
+}
+
+.button {
+    &.button-loading {
+        background: @grey-mid-1 !important;
+        cursor: not-allowed !important;
+
+        &:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
+}
+
+.card {
+    background: @white;
+    border: 1px solid @grey-mid-1;
+    border-radius: 10px;
+    margin-top: 20px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+
+    .card-header {
+        width: 100%;
+        background-color: @dark-grey-1;
+        color: @white;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        display: flex;
+        justify-content: space-between;
+        
+        h2 {
+            padding: 20px;
+            margin: 0px;
+        }
+    }
+
+    .card-content {
+        padding: 20px;
+    }
+}