@gnar-engine/cli 1.0.0 → 1.0.1

package/bootstrap/services/portal/src/pages/products/Products.jsx

@@ -0,0 +1,212 @@
+import React, { useState, useEffect } from "react";
+import CrudLayout from "../../layouts/CrudLayout";
+import CrudProductList from '../../features/crudProducts/CrudProductList';
+import CrudProductSingle from '../../features/crudProducts/CrudProductSingle';
+import gnarEngine from "@gnar-engine/js-client";
+import CustomSelect from "../../ui/customSelect/CustomSelect";
+import arrow from '../../assets/arrow.svg';
+
+
+const Products = () => {
+
+    const [view, setView] = useState("list");
+    const [selectedSingleItemId, setSelectedSingleItemId] = useState(null);
+    const [selectedProduct, setProduct] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [selectedAction, setSelectedAction] = useState(null);
+    const [selectedProductIds, setSelectedProductIds] = useState(new Set());
+    const [products, setProducts] = useState([]);
+    const [message, setMessage] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const fetchProducts = async () => {
+        try {
+            // Fetch users from gnarEngine SDK
+            const data = await gnarEngine.products.getMany();
+
+            console.log('data:', data);
+
+            // Map response data to expected structure
+            const productsList = data.products.map(product => ({
+                id: product._id,
+                image: product.image,
+                name: product.name,
+                sku: product.skus.map(sku => sku.sku).join(', '),
+                categories: product.categories.join(', '),
+                createdAt: formatDate(product.createdAt),
+            }));
+
+            setProducts(productsList);
+            setMessage(productsList.length > 0 ? '' : 'No products found');
+        } catch (error) {
+            console.error('Error fetching products:', error);
+            setMessage('Error fetching products');
+            setProducts([]);
+        }
+    }
+
+    useEffect(() => {
+        fetchProducts();
+    }, []);
+
+    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);
+        setProduct(null);
+    }
+
+    const handleImport = () => {
+        console.log('import');
+    }
+
+    const handleExport = () => {
+        console.log('export');
+    }
+
+    const refreshSelectedProduct = () => {
+        if (!selectedSingleItemId) {
+            return;
+        }
+        (async () => {
+            try {
+                const data = await gnarEngine.products.getProduct(selectedSingleItemId);
+                setProduct(data.product);
+            } catch (error) {
+                console.error('Error fetching product:', error);
+            }
+        })();
+    }
+
+    useEffect(() => {
+        (async () => {
+            if (!selectedSingleItemId) {
+                return;
+            }
+            try {
+                // fetch product data
+                const data = await gnarEngine.products.getProduct(selectedSingleItemId);
+                console.log('single product data:', data);
+                setProduct(data.product);
+
+            } catch (error) {
+                console.error('Error fetching product:', 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 (selectedProductIds.size === 0) {
+            alert("Please select a product to delete first!");
+            return;
+        }
+        if (!window.confirm(`Are you sure you want to delete ${selectedProductIds.size} product(s)?`)) {
+            return;
+        }
+        (async () => {
+            try {
+                for (const productId of selectedProductIds) {
+                    await gnarEngine.products.delete(productId);
+                }
+                setSelectedProductIds(new Set());
+                setSelectedAction(null);
+                await fetchProducts();
+            } catch (error) {
+                console.error('Error deleting product:', 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>
+                                {/* <button onClick={handleImport} className="add-new">Import</button> */}
+                                {/* <button onClick={handleExport} className="add-new">Export</button> */}
+                            </div>
+                            <div className="controls-right-col">
+                                <CustomSelect
+                                    name="filter-products"
+                                    placeholder="filter by"
+                                    options={[
+                                        { id: "all", name: "All" }
+                                    ]}
+                                    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>
+                        <CrudProductList 
+                            setSelectedSingleItemId={setSelectedSingleItemId} 
+                            setView={() => setView('single')}
+                            selectedProductIds={selectedProductIds}
+                            setSelectedProductIds={setSelectedProductIds}
+                            products={products}
+                            message={message} 
+                        />
+                    </div>
+                ) : (
+                    <CrudProductSingle 
+                        loading={loading} 
+                        setLoading={setLoading} 
+                        product={selectedProduct} 
+                        setView={() => setView('list')} 
+                        refreshSelectedProduct={refreshSelectedProduct} 
+                        setProduct={setProduct}
+                        fetchProducts={fetchProducts} 
+                        handleDelete={handleDelete}
+                        setSelectedSingleItemId={setSelectedSingleItemId}
+                        formatDate={formatDate}
+                    />
+                )}
+            </div>
+        </CrudLayout>
+    );
+}
+
+export default Products;

package/bootstrap/services/portal/src/pages/raffleEntries/RaffleEntries.jsx

@@ -0,0 +1,124 @@
+import { useEffect, useState } from "react";
+import RaffleEntriesList from "../../features/raffleEntriesList/RaffleEntriesList";
+import CustomSelect from "../../ui/customSelect/CustomSelect";
+import gnarEngine from "@gnar-engine/js-client";
+import arrow from '../../assets/arrow.svg';
+
+
+const RaffleEntries = () => {
+    const [raffleEntries, setRaffleEntries] = useState([]);
+    const [raffles, setRaffles] = useState([]);
+    const [message, setMessage] = useState('Please select a raffle to see entries');
+    const [selectedRaffle, setSelectedRaffle] = useState(null);
+    const [selectedEntryIds, setSelectedEntryIds] = useState(new Set());
+    const [selectedAction, setSelectedAction] = useState(null);
+
+
+    const fetchRaffles = async () => {
+        try {
+            const data = await gnarEngine.raffles.getRaffles();
+            console.log('raffles:', data);
+
+            setRaffles(data.raffle);
+        } catch (error) {
+            console.error('Error fetching raffles:', error);
+            setRaffles([]);
+        }
+    }
+
+    const fetchRaffleEntries = async (raffleId) => {
+        if (!raffleId) return;
+    
+        try {
+            const data = await gnarEngine.raffles.getRaffleEntries(raffleId);
+            console.log('raffle entries:', data);
+    
+            setRaffleEntries(data.entries);
+            setMessage(data.entries.length > 0 ? '' : 'No entries found for this raffle');
+        } catch (error) {
+            console.error('Error fetching raffle entries:', error);
+            setRaffleEntries([]);
+        }
+    }
+    
+    useEffect(() => {
+        fetchRaffles();
+    }, []);
+    
+    useEffect(() => {
+        if (selectedRaffle?.id) {
+            fetchRaffleEntries(selectedRaffle.id);
+        }
+    }, [selectedRaffle]);
+
+    const handleAction = async () => {
+        if (!selectedAction) {
+            alert("Please select an action first!");
+            return;
+        }
+    
+        if (selectedAction.id === "export") {
+            console.log("Export action triggered");
+        }
+
+        if (selectedAction.id === "generate-list") {
+            console.log("Generate list action triggered");
+
+            if (!selectedRaffle?.id) {
+                alert("Please select a raffle first!");
+                return;
+            }
+
+            try {
+                await gnarEngine.raffles.generateList(selectedRaffle.id)
+            } catch (error) {
+                console.error("Error generating raffle list:", error);
+                alert("Failed to generate raffle list");
+            }
+        }
+    };
+
+    
+    return (
+        <div className="crud-page">
+            <div className="crud-list-cont">
+                <div className="crud-list-controls">
+                    <div className="controls-left-col">
+                        <CustomSelect
+                            name="raffle"
+                            labelKey="name" 
+                            options={raffles}
+                            setSelectedOption={setSelectedRaffle}
+                            selectedOption={selectedRaffle}
+                            placeholder="Select a raffle"
+                        />
+                    </div>
+                    <div className="controls-right-col">
+                        <CustomSelect 
+                            name="action"
+                            placeholder="action"
+                            options={[
+                                { id: "export", name: "Export" },
+                                { id: "generate-list", name: "Generate List" }
+                            ]}
+                            labelKey="name"
+                            setSelectedOption={setSelectedAction}
+                            selectedOption={selectedAction}
+                        />
+                        <button className="arrowButton" onClick={handleAction}><img src={arrow} alt="right arrow icon" /></button>
+                    </div>
+                </div>
+
+                <RaffleEntriesList 
+                    raffleEntries={raffleEntries}
+                    setRaffleEntries={setRaffleEntries}
+                    selectedEntryIds={selectedEntryIds}
+                    setSelectedEntryIds={setSelectedEntryIds}
+                    message={message}
+                />
+            </div>
+        </div>
+    );
+}
+
+export default RaffleEntries;

package/bootstrap/services/portal/src/pages/raffles/Raffles.jsx

@@ -0,0 +1,186 @@
+import gnarEngine from "@gnar-engine/js-client";
+import { useEffect, useState } from "react";
+import CrudLayout from "../../layouts/CrudLayout";
+import CustomSelect from "../../ui/customSelect/CustomSelect";
+import CrudRafflesList from "../../features/crudRaffles/CrudRafflesList";
+import CrudRafflesSingle from "../../features/crudRaffles/CrudRafflesSingle";
+import arrow from '../../assets/arrow.svg';
+
+
+const Raffles = () => {
+    const [view, setView] = useState("list");
+    const [selectedSingleItemId, setSelectedSingleItemId] = useState(null);
+    const [raffles, setRaffles] = useState([]);
+    const [selectedRaffle, setRaffle] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [selectedAction, setSelectedAction] = useState(null);
+    const [selectedRaffleIds, setSelectedRaffleIds] = useState(new Set());
+    const [message, setMessage] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+    
+
+    const fetchRaffles = async () => {
+        try {
+            const data = await gnarEngine.raffles.getRaffles();
+            console.log('raffles:', data);
+
+            const rafflesList = data.raffle.map(raffle => ({
+                id: raffle.id,
+                name: raffle.name,
+                description: raffle.description,
+                prizeDescription: raffle.prizeDescription,
+                created_at: formatDate(raffle.created_at),
+            }));
+
+            setRaffles(rafflesList);
+            setMessage(rafflesList.length > 0 ? '' : 'No raffles found');
+
+        } catch (error) {
+            console.error('Error fetching raffles:', error);
+            setRaffles([]);
+        }
+    }
+
+    useEffect(() => {
+        fetchRaffles();
+    }, []);
+
+    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);
+        setRaffle(null);
+    }
+
+    const refreshSelectedRaffle = () => {
+        if (!selectedSingleItemId) {
+            return;
+        }
+        (async () => {
+            try {
+                const data = await gnarEngine.raffles.getRaffle(selectedSingleItemId);
+                setRaffle(data.raffle);
+            } catch (error) {
+                console.error('Error fetching raffles:', error);
+            }
+        })();
+    }
+
+    useEffect(() => {
+        (async () => {
+            if (!selectedSingleItemId) {
+                return;
+            }
+            try {
+                // fetch contact data
+                const data = await gnarEngine.raffles.getRaffle(selectedSingleItemId);
+                setRaffle(data.raffle);
+
+            } catch (error) {
+                console.error('Error fetching raffle:', 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 (selectedRaffleIds.size === 0) {
+            alert("Please select a raffle to delete first!");
+            return;
+        }
+        if (!window.confirm(`Are you sure you want to delete ${selectedRaffleIds.size} raffle(s)?`)) {
+            return;
+        }
+        (async () => {
+            try {
+                for (const raffleId of selectedRaffleIds) {
+                    await gnarEngine.raffles.deleteRaffle(raffleId);
+                }
+                setSelectedRaffleIds(new Set());
+                setSelectedAction(null);
+                await fetchRaffles();
+            } catch (error) {
+                console.error('Error deleting raffle:', 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="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>
+                        <CrudRafflesList 
+                            setSelectedSingleItemId={setSelectedSingleItemId} 
+                            setView={() => setView('single')}
+                            selectedRaffleIds={selectedRaffleIds}
+                            setSelectedRaffleIds={setSelectedRaffleIds}
+                            raffles={raffles}
+                            message={message} 
+                        />
+                    </div>
+                ) : (
+                    <CrudRafflesSingle
+                        loading={loading} 
+                        setLoading={setLoading} 
+                        raffle={selectedRaffle} 
+                        setView={() => setView('list')} 
+                        refreshSelectedRaffle={refreshSelectedRaffle} 
+                        setRaffle={setRaffle}
+                        fetchRaffles={fetchRaffles}
+                        formatDate={formatDate}
+                        setSelectedSingleItemId={setSelectedSingleItemId}
+                    />
+                )}
+            </div>
+        </CrudLayout>
+    );
+}
+
+export default Raffles;

package/bootstrap/services/portal/src/pages/reports/Reports.jsx

@@ -0,0 +1,10 @@
+const Reports = () => {
+
+    return (
+        <div>
+            <h1>Reports Page</h1>
+        </div>
+    );
+}
+
+export default Reports;

package/bootstrap/services/portal/src/pages/settings/Settings.jsx

@@ -0,0 +1,10 @@
+const Settings = () => {
+
+    return (
+        <div>
+            <h1>Settings Page</h1>
+        </div>
+    );
+}
+
+export default Settings;