admin_lsac 1.1.0 → 1.1.3

package/README.md

@@ -1,46 +1,127 @@
-# Getting Started with Create React App
+# Generic Admin Panel
+
+For configuring your own admin panel, follow the next instructions.
+
+### `npm install admin_lsac`
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+This command will download and install the specified package and its dependencies into your project's node_modules directory, making it available for use in your project.
+
+### `npm install export-to-csv@1.2.1`
+
+Export-to-csv package latest version is not working properly, so make sure you have the last functional version of this package install.
+
+### `import AdminPanel from 'admin_lsac'`
+
+You can import this component in the root file of your project (i.e index.js) or in App.js. If your project is TypeScript-based, you need to write the following line as well:
+
+### `import PageSchema from 'admin_lsac'`
+
+You need to create an array of schemas to pass it as props to the component.
+
+### `<AdminPanel pages={your_array} />`
+
+## What is a schema?
+
+```
+export interface PageSchema {
+  name: string;
+  actions: Action[];
+  rowActions: RowAction[];
+  getRequest: () => Promise<any[]>;
+  tableFields: TableField[];
+}
+
+export interface TableField {
+  name: string;
+  access: (obj: any) => string | number | React.ReactElement;
+}
+
+export interface SimpleField {
+  name: string;
+  label: string;
+  type: "string" | "number" | "file";
+  validationSchema: any;
+}
+
+export interface Option {
+  value: string | number | boolean;
+  display: string;
+}
+
+export interface DropdownField {
+  name: string;
+  label: string;
+  type: "dropdown";
+  options?: Option[] | undefined;
+  getOptions: () => Promise<Option[]>;
+}
+
+export interface ObjectField {
+  name: string;
+  label: string;
+  type: "object";
+  fields: FormField[];
+}
+
+export interface ArrayField {
+  name: string;
+  label: string;
+  type: "array";
+  element: Exclude<FormField, ArrayField>;
+}
+
+export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
+
+export interface Action {
+  name: string;
+  fields?: FormField[];
+  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
+}
+
+export interface RowAction {
+  name: string;
+  fields?: FormField[];
+  initialise?: (obj: any) => any;
+  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
+}
+```
+
+A page schema is based on these interfaces, which can be imported into your files. A page schema describes how one table of your admin panel would need to be structured to accomplish what the user needs regarding an entity. (i.e. users, teams, companies, quizzes)
+
+#### In JavaScript, an array of schemas would be defined as follows:
+
+```
+const your_array = [
+    {
+        // schema 1
+    },
+    {
+        // schema 2
+    },
+    ...
+];
+```
+
+#### In TypeScript, an array of schemas would be defined as follows:
+
+```
+const your_array: PageSchema[] = [
+    {
+        // schema 1
+    },
+    {
+        // schema 2
+    },
+    ...
+];
+```
+
+## Other Specifications
+
+Due to some corrupt dependencies, you need a Node version >= 20.5.0 to use this package in a Vite app.
+
+For every entity you describe through a page schema, getRequest and onSubmit functions will use routes created for the entity. `getRequest` function will make a GET request, while `onSumbit` will probably make a POST, PATCH or DELETE request.
 
 ## Learn More
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+For more details, especially about page schemas, contact the owner. :)

package/dist/App.d.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+declare module "admin_lsac" {
+  export interface TableField {
+    name: string;
+    access: (obj: any) => string | number | React.ReactElement;
+  }
+
+  export interface SimpleField {
+    name: string;
+    label: string;
+    type: "string" | "number" | "file";
+    validationSchema: any;
+  }
+
+  export interface Option {
+    value: string | number | boolean;
+    display: string;
+  }
+
+  export interface DropdownField {
+    name: string;
+    label: string;
+    type: "dropdown";
+    options?: Option[] | undefined;
+    getOptions: () => Promise<Option[]>;
+  }
+
+  export interface ObjectField {
+    name: string;
+    label: string;
+    type: "object";
+    fields: FormField[];
+  }
+
+  export interface ArrayField {
+    name: string;
+    label: string;
+    type: "array";
+    element: Exclude<FormField, ArrayField>;
+  }
+
+  export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
+
+  export interface Action {
+    name: string;
+    fields?: FormField[];
+    onSubmit: (obj1: any, obj2?: any) => Promise<any>;
+  }
+
+  export interface RowAction {
+    name: string;
+    fields?: FormField[];
+    initialise?: (obj: any) => any;
+    onSubmit: (obj1: any, obj2?: any) => Promise<any>;
+  }
+
+  export interface PageSchema {
+    name: string;
+    actions: Action[];
+    rowActions: RowAction[];
+    getRequest: () => Promise<any[]>;
+    tableFields: TableField[];
+  }
+
+  interface AdminPanelProps {
+    pages: PageSchema[];
+  }
+
+  export default function AdminPanel({ pages }: AdminPanelProps): React.ReactElement;
+
+  interface PageProps {
+    pages: PageSchema[];
+    selectedPage: PageSchema;
+  }
+
+  export function Page(props: PageProps): React.ReactElement;
+}

package/dist/esm/App.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChakraProvider } from "@chakra-ui/react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Page } from "./components/Page";
+import { pageToUrl } from "./schema/schema";
+function AdminPanel(_a) {
+    var pages = _a.pages;
+    return (_jsx(ChakraProvider, { children: _jsx(BrowserRouter, { children: _jsxs(Routes, { children: [pages.map(function (page) { return (_jsx(Route, { path: pageToUrl(page), element: _jsx(Page, { pages: pages, selectedPage: page }) })); }), pages[0] ?
+                        _jsx(Route, { path: "*", element: _jsx(Page, { pages: pages, selectedPage: pages[0] }) })
+                        : null] }) }) }));
+}
+export default AdminPanel;

package/dist/esm/components/GenericForm.js

@@ -0,0 +1,243 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, FormControl, FormErrorMessage, FormLabel, Input, Select, } from "@chakra-ui/react";
+import { Field, Form, Formik, FieldArray, getIn } from "formik";
+import * as Yup from "yup";
+import Swal from "sweetalert2";
+import { useEffect, useState } from "react";
+function parseValidation(fields) {
+    if (!fields) {
+        return {};
+    }
+    return fields.reduce(function (acc, field) {
+        if (field.type !== "dropdown" &&
+            field.type !== "object" &&
+            field.type !== "array") {
+            acc[field.name] = field.validationSchema;
+        }
+        else if (field.type === "array") {
+            if (field.element.type === "dropdown") {
+                acc[field.name] = Yup.array().of(Yup.string().required());
+            }
+            else if (field.element.type === "object") {
+                acc[field.name] = Yup.array().of(Yup.object(parseValidation(field.element.fields)));
+            }
+            else {
+                acc[field.name] = Yup.array().of(field.element.validationSchema);
+            }
+        }
+        else if (field.type === "object") {
+            acc[field.name] = Yup.object(parseValidation(field.fields));
+        }
+        if (field.type === "dropdown") {
+            acc[field.name] = Yup.string().required();
+        }
+        return acc;
+    }, {});
+}
+function generateSingleField(formfield, fieldName, key) {
+    return (_jsx(Field, __assign({ name: fieldName }, { children: function (_a) {
+            var _b;
+            var field = _a.field, form = _a.form;
+            return (_jsxs(FormControl, __assign({ isInvalid: getIn(form.touched, fieldName) && getIn(form.errors, fieldName) }, { children: [_jsx(FormLabel, __assign({ marginTop: 2 }, { children: formfield.label })), formfield.type === "string" || formfield.type === "number" ? (_jsx(Input, __assign({}, field, { type: formfield.type === "number" ? "number" : "text", placeholder: "" }))) : formfield.type === "file" ? (_jsx(Input, { type: "file", name: fieldName, onChange: function (event) {
+                            if (event.currentTarget.files != null) {
+                                form.setFieldValue(fieldName, event.currentTarget.files[0]);
+                            }
+                        } })) : (_jsxs(Select, __assign({}, field, { defaultValue: "" }, { children: [_jsx("option", __assign({ disabled: true, value: "" }, { children: "Select an option!" })), (_b = formfield.options) === null || _b === void 0 ? void 0 : _b.map(function (option, key) { return (_jsx("option", __assign({ value: "".concat(option.value) }, { children: option.display }), key)); })] }))), _jsx(FormErrorMessage, { children: getIn(form.errors, fieldName) })] })));
+        } }), key));
+}
+function parseFields(fields, previous) {
+    if (!fields) {
+        return [];
+    }
+    var computedFields = fields.map(function (formfield, key) {
+        var fieldName = previous !== undefined ? previous + "." + formfield.name : formfield.name;
+        if (formfield.type === "object") {
+            var objectFields = parseFields(formfield.fields, fieldName);
+            return _jsx(FormControl, { children: objectFields }, fieldName);
+        }
+        else if (formfield.type === "array") {
+            return (_jsx(FieldArray, __assign({ name: fieldName }, { children: function (_a) {
+                    var remove = _a.remove, push = _a.push, form = _a.form;
+                    return (_jsxs("div", { children: [_jsx(FormLabel, __assign({ marginTop: 2 }, { children: formfield.label })), getIn(form.values, fieldName).length > 0 &&
+                                getIn(form.values, fieldName).map(function (element, index) { return (_jsxs(Box, __assign({ paddingLeft: 10 }, { children: [_jsx("h4", { children: _jsx("b", { children: "".concat(fieldName, ".").concat(index) }) }), _jsx(Box, __assign({ paddingLeft: 10 }, { children: formfield.element.type === "object"
+                                                ? parseFields(formfield.element.fields, "".concat(fieldName, ".").concat(index))
+                                                : generateSingleField(formfield.element, "".concat(fieldName, ".").concat(index), key) })), _jsxs(Button, __assign({ type: "button", colorScheme: "red", marginY: 2, onClick: function () { return remove(index); } }, { children: ["Remove ", "".concat(fieldName, ".").concat(index)] }))] }))); }), _jsxs(Button, __assign({ type: "button", marginY: 2, colorScheme: "blue", onClick: function () {
+                                    var value = undefined;
+                                    if (formfield.element.type === "object") {
+                                        value = getInitialValues(formfield.element.fields);
+                                    }
+                                    else {
+                                        value = getInitialValues([formfield.element])[0];
+                                    }
+                                    push(value);
+                                } }, { children: ["Add ", fieldName] }))] }));
+                } })));
+        }
+        else {
+            return generateSingleField(formfield, fieldName, key);
+        }
+    });
+    return computedFields;
+}
+function getInitialValues(fields) {
+    var obj = {};
+    if (!fields) {
+        return obj;
+    }
+    fields.forEach(function (field) {
+        if (field.type === "array")
+            obj[field.name] = [];
+        else if (field.type === "object")
+            obj[field.name] = getInitialValues(field.fields);
+        else if (field.type === "string")
+            obj[field.name] = "";
+        else if (field.type === "number")
+            obj[field.name] = 0;
+        else
+            obj[field.name] = null;
+    });
+    return obj;
+}
+function setOptions(fields) {
+    return __awaiter(this, void 0, void 0, function () {
+        var promises;
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!fields) {
+                        return [2 /*return*/];
+                    }
+                    promises = fields.map(function (field) { return __awaiter(_this, void 0, void 0, function () {
+                        var _a;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0:
+                                    if (!(field.type === "dropdown")) return [3 /*break*/, 2];
+                                    _a = field;
+                                    return [4 /*yield*/, field.getOptions()];
+                                case 1:
+                                    _a.options = _b.sent();
+                                    return [3 /*break*/, 6];
+                                case 2:
+                                    if (!(field.type === "array")) return [3 /*break*/, 4];
+                                    return [4 /*yield*/, setOptions([field.element])];
+                                case 3:
+                                    _b.sent();
+                                    return [3 /*break*/, 6];
+                                case 4:
+                                    if (!(field.type === "object")) return [3 /*break*/, 6];
+                                    return [4 /*yield*/, setOptions(field.fields)];
+                                case 5:
+                                    _b.sent();
+                                    _b.label = 6;
+                                case 6: return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                    return [4 /*yield*/, Promise.all(promises)];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+export function GenericForm(_a) {
+    var _this = this;
+    var action = _a.action, onClose = _a.onClose, rowId = _a.rowId;
+    var _b = useState(parseFields(action.fields)), formFields = _b[0], setFormFields = _b[1];
+    var initialValues = useState(getInitialValues(action.fields))[0];
+    var validationSchema = useState(parseValidation(action.fields))[0];
+    useEffect(function () {
+        setOptions(action.fields).then(function () {
+            setFormFields(parseFields(action.fields));
+        });
+    }, []);
+    if (!action.fields)
+        return _jsx(_Fragment, {});
+    return (_jsx(_Fragment, { children: _jsx(Formik, __assign({ initialValues: initialValues, validationSchema: Yup.object(validationSchema), onSubmit: function (values) { return __awaiter(_this, void 0, void 0, function () {
+                var res, e_1, err;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 5, , 6]);
+                            res = void 0;
+                            if (!rowId) return [3 /*break*/, 2];
+                            return [4 /*yield*/, action.onSubmit(values, rowId)];
+                        case 1:
+                            res = _a.sent();
+                            return [3 /*break*/, 4];
+                        case 2: return [4 /*yield*/, action.onSubmit(values)];
+                        case 3:
+                            res = _a.sent();
+                            _a.label = 4;
+                        case 4:
+                            if (onClose)
+                                onClose();
+                            Swal.fire("Ok");
+                            return [3 /*break*/, 6];
+                        case 5:
+                            e_1 = _a.sent();
+                            if (onClose)
+                                onClose();
+                            err = e_1.request.response;
+                            Swal.fire({
+                                text: "Error: " + err,
+                            });
+                            return [3 /*break*/, 6];
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            }); } }, { children: function (_a) {
+                var isSubmitting = _a.isSubmitting;
+                return (_jsxs(Form, { children: [formFields, _jsx(Button, __assign({ mt: 4, colorScheme: "teal", isLoading: isSubmitting, type: "submit" }, { children: "Submit" }))] }));
+            } })) }));
+}

package/dist/esm/components/Page.js

@@ -0,0 +1,99 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { pageToUrl } from "../schema/schema";
+import { Button, Modal, ModalHeader, ModalBody, useDisclosure, ModalOverlay, ModalContent, ModalCloseButton, Box, Stack, } from "@chakra-ui/react";
+import { GenericForm } from "./GenericForm";
+import { useNavigate } from "react-router";
+import { ThemeProvider } from "@emotion/react";
+import { createTheme } from "@mui/material/styles";
+import { MaterialReactTable } from "material-react-table";
+import { mkConfig, generateCsv, download } from "export-to-csv";
+import Swal from "sweetalert2";
+import MenuItem from "@mui/material/MenuItem";
+function Header(_a) {
+    var pages = _a.pages, data = _a.data;
+    var nav = useNavigate();
+    return (_jsx(Box, __assign({ background: "blue.50", padding: 1 }, { children: _jsxs(Stack, __assign({ margin: 3, direction: "row", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Stack, __assign({ margin: 4, gap: 10, direction: "row", alignItems: "center" }, { children: pages.map(function (p) { return (_jsx(Box, __assign({ as: "a", href: pageToUrl(p) }, { children: p.name }))); }) })), _jsx(Stack, __assign({ direction: "row" }, { children: _jsx(Button, __assign({ colorScheme: "red", onClick: function () {
+                            var filename = prompt("Enter filename:");
+                            if (filename)
+                                exportToCSV(data, filename);
+                        } }, { children: "Export Data" })) }))] })) })));
+}
+function exportToCSV(data, filename) {
+    var formatImageData = function (obj) {
+        var formattedObj = {};
+        for (var key in obj) {
+            if (typeof obj[key] !== "object") {
+                formattedObj[key] = obj[key];
+            }
+        }
+        return formattedObj;
+    };
+    var formattedData = data.map(formatImageData);
+    var csvConfig = mkConfig({
+        useKeysAsHeaders: true,
+        filename: filename,
+    });
+    if (formattedData.length > 0) {
+        var csv = generateCsv(csvConfig)(formattedData);
+        download(csvConfig)(csv);
+    }
+    else {
+        Swal.fire({
+            title: "Error while exporting CSV!",
+            text: "There is no data to export.",
+        });
+    }
+}
+export function Page(_a) {
+    var _b;
+    var pages = _a.pages, selectedPage = _a.selectedPage;
+    var _c = useDisclosure(), isOpen = _c.isOpen, onOpen = _c.onOpen, onClose = _c.onClose;
+    var _d = useState({}), selectedAction = _d[0], setSelectedAction = _d[1];
+    var _e = useState([]), data = _e[0], setData = _e[1];
+    var _f = useState([]), displayData = _f[0], setDisplayData = _f[1];
+    var _g = useState(), rowId = _g[0], setRowId = _g[1];
+    useEffect(function () {
+        selectedPage.getRequest().then(function (resArray) {
+            setData(resArray);
+        });
+    }, []);
+    useEffect(function () {
+        setDisplayData(data.map(function (table_data) {
+            return selectedPage.tableFields.map(function (field) { return field.access(table_data); });
+        }));
+    }, [data]);
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { pages: pages, data: data }), _jsx(ThemeProvider, __assign({ theme: createTheme() }, { children: _jsx(MaterialReactTable, { columns: selectedPage.tableFields.map(function (field, index) { return ({
+                        accessorFn: function (row) { return row[index]; },
+                        header: field.name,
+                    }); }), data: displayData, muiTableContainerProps: { sx: { maxHeight: "70vh" } }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: true, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: function () { return (_jsx(ChakraProvider, { children: _jsx(Stack, __assign({ margin: 0, padding: 3, direction: "row" }, { children: selectedPage.actions.map(function (action) { return (_jsx(Button, __assign({ colorScheme: "blue", onClick: function () {
+                                    setSelectedAction(action);
+                                    onOpen();
+                                } }, { children: action.name }))); }) })) })); }, enableRowActions: true, renderRowActionMenuItems: function (obj) {
+                        return selectedPage.rowActions.map(function (rowAction) { return (_jsx(MenuItem, __assign({ onClick: function () {
+                                setSelectedAction(rowAction);
+                                setRowId(obj.row.original[0]);
+                                onOpen();
+                                var rowActionsMenu = document.querySelector(".MuiPaper-root.MuiPopover-paper.MuiMenu-paper");
+                                if (rowActionsMenu) {
+                                    rowActionsMenu.remove();
+                                }
+                            } }, { children: rowAction.name + " " + obj.row.original[0] }))); });
+                    } }) })), _jsxs(Modal, __assign({ size: "6xl", isOpen: isOpen, onClose: onClose }, { children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: selectedAction.name }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { children: [selectedAction.fields && ((_b = selectedAction.fields) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (_jsx(GenericForm, { action: selectedAction, onClose: onClose, rowId: rowId })) : (_jsx(Button, __assign({ colorScheme: "blue", mr: 3, onClick: function () {
+                                            selectedAction.onSubmit(rowId);
+                                            onClose();
+                                            window.location.reload();
+                                        } }, { children: "Confirm Action" }))), _jsx(Button, __assign({ colorScheme: "red", mr: 3, onClick: onClose }, { children: "Close" }))] })] })] }))] }));
+}

package/dist/esm/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import AdminPanel from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { event } from "./pages/event";
+var root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(_jsx(React.StrictMode, { children: _jsx(AdminPanel, { pages: [event] }) }));
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/dist/esm/pages/event.js

@@ -0,0 +1,104 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from "react";
+var domain = "http://localhost:3001";
+export var event = {
+    name: "Events",
+    actions: [],
+    rowActions: [],
+    getRequest: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            // const res = await axios.get(domain + "/events");
+            // return res.data;
+            return [2 /*return*/, []];
+        });
+    }); },
+    tableFields: [
+        {
+            name: "Id",
+            access: function (obj) { return obj.id; },
+        },
+        {
+            name: "Event Name",
+            access: function (obj) { return obj.name; },
+        },
+        {
+            name: "Description",
+            access: function (obj) { return obj.description; },
+        },
+        {
+            name: "Category",
+            access: function (obj) { return obj.category; },
+        },
+        {
+            name: "Ticket Type",
+            access: function (obj) { return obj.ticketType; },
+        },
+        {
+            name: "Date",
+            access: function (obj) { return obj.date; },
+        },
+        {
+            name: "Release",
+            access: function (obj) { return obj.release; },
+        },
+        {
+            name: "Is Released",
+            access: function (obj) { return (obj.isReleased ? "Is Released" : "Not Released"); },
+        },
+        {
+            name: "Available Tickets",
+            access: function (obj) { return obj.availableTickets; },
+        },
+        {
+            name: "Max Tickets",
+            access: function (obj) { return obj.maxTickets; },
+        },
+        {
+            name: "Image",
+            access: function (obj) {
+                return obj.imgUrl
+                    ? React.createElement("img", {
+                        src: obj.imgUrl,
+                        alt: "ERROR",
+                        style: { width: "100px" },
+                    })
+                    : "No Image Available";
+            },
+        },
+    ],
+};

package/dist/esm/reportWebVitals.js

@@ -0,0 +1,13 @@
+var reportWebVitals = function (onPerfEntry) {
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+        import("web-vitals").then(function (_a) {
+            var getCLS = _a.getCLS, getFID = _a.getFID, getFCP = _a.getFCP, getLCP = _a.getLCP, getTTFB = _a.getTTFB;
+            getCLS(onPerfEntry);
+            getFID(onPerfEntry);
+            getFCP(onPerfEntry);
+            getLCP(onPerfEntry);
+            getTTFB(onPerfEntry);
+        });
+    }
+};
+export default reportWebVitals;

package/dist/esm/schema/schema.config.js

@@ -0,0 +1,4 @@
+import { event } from "../pages/event";
+export var pages = [
+    event, // example schema
+];

package/dist/esm/schema/schema.js

@@ -0,0 +1,3 @@
+export function pageToUrl(page) {
+    return "/".concat(page.name.toLowerCase().replace(" ", "_"));
+}

package/dist/esm/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "admin_lsac",
-  "version": "1.1.0",
+  "version": "1.1.3",
+  "description": "Generic Admin Panel created for storing events' data",
   "private": false,
   "dependencies": {
     "@chakra-ui/react": "^2.5.5",
@@ -65,5 +66,7 @@
     "ts-loader": "^9.5.1",
     "webpack-cli": "^5.1.4"
   },
-  "main": "dist/App.js"
+  "main": "dist/App.js",
+  "module": "dist/esm/App.js",
+  "types": "dist/App.d.ts"
 }

package/src/App.tsx

@@ -4,24 +4,24 @@ import { Page } from "./components/Page";
 import { pageToUrl } from "./schema/schema";
 import * as React from "react";
 
-export interface TableField {
+interface TableField {
   name: string;
   access: (obj: any) => string | number | React.ReactElement;
 }
 
-export interface SimpleField {
+interface SimpleField {
   name: string;
   label: string;
   type: "string" | "number" | "file";
   validationSchema: any;
 }
 
-export interface Option {
+interface Option {
   value: string | number | boolean;
   display: string;
 }
 
-export interface DropdownField {
+interface DropdownField {
   name: string;
   label: string;
   type: "dropdown";
@@ -29,36 +29,36 @@ export interface DropdownField {
   getOptions: () => Promise<Option[]>;
 }
 
-export interface ObjectField {
+interface ObjectField {
   name: string;
   label: string;
   type: "object";
   fields: FormField[];
 }
 
-export interface ArrayField {
+interface ArrayField {
   name: string;
   label: string;
   type: "array";
   element: Exclude<FormField, ArrayField>;
 }
 
-export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
+type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
 
-export interface Action {
+interface Action {
   name: string;
   fields?: FormField[];
   onSubmit: (obj1: any, obj2?: any) => Promise<any>;
 }
 
-export interface RowAction {
+interface RowAction {
   name: string;
   fields?: FormField[];
   initialise?: (obj: any) => any;
   onSubmit: (obj1: any, obj2?: any) => Promise<any>;
 }
 
-export interface PageSchema {
+interface PageSchema {
   name: string;
   actions: Action[];
   rowActions: RowAction[];