admin_lsac 1.1.4 → 1.2.2

package/README.md

@@ -14,11 +14,11 @@ Export-to-csv package latest version is not working properly, so make sure you h
 
 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'`
+### `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} />`
+### `<AdminPanel pages={your_array} basePath="where_is_admin_located" />`
 
 ## What is a schema?
 

package/dist/App.d.ts

@@ -65,13 +65,15 @@ declare module "admin_lsac" {
 
   interface AdminPanelProps {
     pages: PageSchema[];
+    basePath: string;
   }
 
-  export default function AdminPanel({ pages }: AdminPanelProps): React.ReactElement;
+  export default function AdminPanel({ pages, basePath }: AdminPanelProps): React.ReactElement;
 
   interface PageProps {
     pages: PageSchema[];
     selectedPage: PageSchema;
+    basePath: string;
   }
 
   export function Page(props: PageProps): React.ReactElement;

package/dist/App.js

@@ -1,14 +1,48 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("@chakra-ui/react");
 var react_router_dom_1 = require("react-router-dom");
 var Page_1 = require("./components/Page");
 var schema_1 = require("./schema/schema");
+var React = __importStar(require("react"));
+var page_1 = require("./pages/page");
 function AdminPanel(_a) {
-    var pages = _a.pages;
-    return ((0, jsx_runtime_1.jsx)(react_1.ChakraProvider, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [pages.map(function (page) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: (0, schema_1.pageToUrl)(page), element: (0, jsx_runtime_1.jsx)(Page_1.Page, { pages: pages, selectedPage: page }) })); }), pages[0] ?
-                        (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(Page_1.Page, { pages: pages, selectedPage: pages[0] }) })
-                        : null] }) }) }));
+    var pages = _a.pages, basePath = _a.basePath;
+    var _b = React.useState(pages), pagesToDisplay = _b[0], setPagesToDisplay = _b[1];
+    React.useEffect(function () {
+        setPagesToDisplay(__spreadArray(__spreadArray([], pages, true), [page_1.page], false));
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(react_1.ChakraProvider, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [pagesToDisplay.map(function (page) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/").concat((0, schema_1.pageToUrl)(page)), element: (0, jsx_runtime_1.jsx)(Page_1.Page, { pages: pagesToDisplay, selectedPage: page, basePath: basePath }, void 0) }, void 0)); }), pages[0] ?
+                    (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/*"), element: (0, jsx_runtime_1.jsx)(Page_1.Page, { pages: pagesToDisplay, selectedPage: pages[0], basePath: basePath }, void 0) }, void 0)
+                    : null] }, void 0) }, void 0));
 }
 exports.default = AdminPanel;

package/dist/cjs/App.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@chakra-ui/react");
+var react_router_dom_1 = require("react-router-dom");
+var Page_1 = require("./components/Page");
+var schema_1 = require("./schema/schema");
+var React = __importStar(require("react"));
+var page_1 = require("./pages/page");
+function AdminPanel(_a) {
+    var pages = _a.pages, basePath = _a.basePath;
+    var _b = React.useState(pages), pagesToDisplay = _b[0], setPagesToDisplay = _b[1];
+    React.useEffect(function () {
+        setPagesToDisplay(__spreadArray(__spreadArray([], pages, true), [page_1.page], false));
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(react_1.ChakraProvider, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [pagesToDisplay.map(function (page) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/").concat((0, schema_1.pageToUrl)(page)), element: (0, jsx_runtime_1.jsx)(Page_1.Page, { pages: pagesToDisplay, selectedPage: page, basePath: basePath }, void 0) }, void 0)); }), pages[0] ?
+                    (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/*"), element: (0, jsx_runtime_1.jsx)(Page_1.Page, { pages: pagesToDisplay, selectedPage: pages[0], basePath: basePath }, void 0) }, void 0)
+                    : null] }, void 0) }, void 0));
+}
+exports.default = AdminPanel;

package/dist/cjs/components/GenericForm.js

@@ -0,0 +1,269 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 (_) 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 };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericForm = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@chakra-ui/react");
+var formik_1 = require("formik");
+var Yup = __importStar(require("yup"));
+var sweetalert2_1 = __importDefault(require("sweetalert2"));
+var react_2 = require("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 ((0, jsx_runtime_1.jsx)(formik_1.Field, __assign({ name: fieldName }, { children: function (_a) {
+            var _b;
+            var field = _a.field, form = _a.form;
+            return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, __assign({ isInvalid: (0, formik_1.getIn)(form.touched, fieldName) && (0, formik_1.getIn)(form.errors, fieldName) }, { children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, __assign({ marginTop: 2 }, { children: formfield.label }), void 0), formfield.type === "string" || formfield.type === "number" ? ((0, jsx_runtime_1.jsx)(react_1.Input, __assign({}, field, { type: formfield.type === "number" ? "number" : "text", placeholder: "" }), void 0)) : formfield.type === "file" ? ((0, jsx_runtime_1.jsx)(react_1.Input, { type: "file", name: fieldName, onChange: function (event) {
+                            if (event.currentTarget.files != null) {
+                                form.setFieldValue(fieldName, event.currentTarget.files[0]);
+                            }
+                        } }, void 0)) : ((0, jsx_runtime_1.jsxs)(react_1.Select, __assign({}, field, { defaultValue: "" }, { children: [(0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: "Select an option!" }), void 0), (_b = formfield.options) === null || _b === void 0 ? void 0 : _b.map(function (option, key) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: "".concat(option.value) }, { children: option.display }), key)); })] }), void 0)), (0, jsx_runtime_1.jsx)(react_1.FormErrorMessage, { children: (0, formik_1.getIn)(form.errors, fieldName) }, void 0)] }), void 0));
+        } }), 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 (0, jsx_runtime_1.jsx)(react_1.FormControl, { children: objectFields }, fieldName);
+        }
+        else if (formfield.type === "array") {
+            return ((0, jsx_runtime_1.jsx)(formik_1.FieldArray, __assign({ name: fieldName }, { children: function (_a) {
+                    var remove = _a.remove, push = _a.push, form = _a.form;
+                    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, __assign({ marginTop: 2 }, { children: formfield.label }), void 0), (0, formik_1.getIn)(form.values, fieldName).length > 0 &&
+                                (0, formik_1.getIn)(form.values, fieldName).map(function (element, index) { return ((0, jsx_runtime_1.jsxs)(react_1.Box, __assign({ paddingLeft: 10 }, { children: [(0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)("b", { children: "".concat(fieldName, ".").concat(index) }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(react_1.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) }), void 0), (0, jsx_runtime_1.jsxs)(react_1.Button, __assign({ type: "button", colorScheme: "red", marginY: 2, onClick: function () { return remove(index); } }, { children: ["Remove ", "".concat(fieldName, ".").concat(index)] }), void 0)] }), void 0)); }), (0, jsx_runtime_1.jsxs)(react_1.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] }), void 0)] }, void 0));
+                } }), void 0));
+        }
+        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*/];
+            }
+        });
+    });
+}
+function GenericForm(_a) {
+    var _this = this;
+    var action = _a.action, onClose = _a.onClose, rowId = _a.rowId;
+    var _b = (0, react_2.useState)(parseFields(action.fields)), formFields = _b[0], setFormFields = _b[1];
+    var initialValues = (0, react_2.useState)(getInitialValues(action.fields))[0];
+    var validationSchema = (0, react_2.useState)(parseValidation(action.fields))[0];
+    (0, react_2.useEffect)(function () {
+        setOptions(action.fields).then(function () {
+            setFormFields(parseFields(action.fields));
+        });
+    }, []);
+    if (!action.fields)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(formik_1.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();
+                            sweetalert2_1.default.fire("Ok");
+                            return [3 /*break*/, 6];
+                        case 5:
+                            e_1 = _a.sent();
+                            if (onClose)
+                                onClose();
+                            err = e_1.request.response;
+                            sweetalert2_1.default.fire({
+                                text: "Error: " + err,
+                            });
+                            return [3 /*break*/, 6];
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            }); } }, { children: function (_a) {
+                var isSubmitting = _a.isSubmitting;
+                return ((0, jsx_runtime_1.jsxs)(formik_1.Form, { children: [formFields, (0, jsx_runtime_1.jsx)(react_1.Button, __assign({ mt: 4, colorScheme: "teal", isLoading: isSubmitting, type: "submit" }, { children: "Submit" }), void 0)] }, void 0));
+            } }), void 0) }, void 0));
+}
+exports.GenericForm = GenericForm;

package/dist/cjs/components/Page.js

@@ -0,0 +1,106 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Page = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_2 = require("@chakra-ui/react");
+var schema_1 = require("../schema/schema");
+var react_3 = require("@chakra-ui/react");
+var GenericForm_1 = require("./GenericForm");
+var react_router_1 = require("react-router");
+var react_4 = require("@emotion/react");
+var styles_1 = require("@mui/material/styles");
+var material_react_table_1 = require("material-react-table");
+var export_to_csv_1 = require("export-to-csv");
+var sweetalert2_1 = __importDefault(require("sweetalert2"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+function Header(_a) {
+    var pages = _a.pages, data = _a.data, basePath = _a.basePath;
+    var nav = (0, react_router_1.useNavigate)();
+    return ((0, jsx_runtime_1.jsx)(react_3.Box, __assign({ background: "blue.50", padding: 1 }, { children: (0, jsx_runtime_1.jsxs)(react_3.Stack, __assign({ margin: 3, direction: "row", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(react_3.Stack, __assign({ margin: 4, gap: 10, direction: "row", alignItems: "center" }, { children: pages.map(function (p) { return ((0, jsx_runtime_1.jsx)(react_3.Box, __assign({ as: "a", href: "".concat(basePath, "/").concat((0, schema_1.pageToUrl)(p)) }, { children: p.name }), void 0)); }) }), void 0), (0, jsx_runtime_1.jsx)(react_3.Stack, __assign({ direction: "row" }, { children: (0, jsx_runtime_1.jsx)(react_3.Button, __assign({ colorScheme: "red", onClick: function () {
+                            var filename = prompt("Enter filename:");
+                            if (filename)
+                                exportToCSV(data, filename);
+                        } }, { children: "Export Data" }), void 0) }), void 0)] }), void 0) }), void 0));
+}
+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 = (0, export_to_csv_1.mkConfig)({
+        useKeysAsHeaders: true,
+        filename: filename,
+    });
+    if (formattedData.length > 0) {
+        var csv = (0, export_to_csv_1.generateCsv)(csvConfig)(formattedData);
+        (0, export_to_csv_1.download)(csvConfig)(csv);
+    }
+    else {
+        sweetalert2_1.default.fire({
+            title: "Error while exporting CSV!",
+            text: "There is no data to export.",
+        });
+    }
+}
+function Page(_a) {
+    var _b;
+    var pages = _a.pages, selectedPage = _a.selectedPage, basePath = _a.basePath;
+    var _c = (0, react_3.useDisclosure)(), isOpen = _c.isOpen, onOpen = _c.onOpen, onClose = _c.onClose;
+    var _d = (0, react_1.useState)({}), selectedAction = _d[0], setSelectedAction = _d[1];
+    var _e = (0, react_1.useState)([]), data = _e[0], setData = _e[1];
+    var _f = (0, react_1.useState)([]), displayData = _f[0], setDisplayData = _f[1];
+    var _g = (0, react_1.useState)(), rowId = _g[0], setRowId = _g[1];
+    (0, react_1.useEffect)(function () {
+        selectedPage.getRequest().then(function (resArray) {
+            setData(resArray);
+        });
+    }, []);
+    (0, react_1.useEffect)(function () {
+        setDisplayData(data.map(function (table_data) {
+            return selectedPage.tableFields.map(function (field) { return field.access(table_data); });
+        }));
+    }, [data]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header, { pages: pages, data: data, basePath: basePath }, void 0), (0, jsx_runtime_1.jsx)(react_4.ThemeProvider, __assign({ theme: (0, styles_1.createTheme)() }, { children: (0, jsx_runtime_1.jsx)(material_react_table_1.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 ((0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { children: (0, jsx_runtime_1.jsx)(react_3.Stack, __assign({ margin: 0, padding: 3, direction: "row" }, { children: selectedPage.actions.map(function (action) { return ((0, jsx_runtime_1.jsx)(react_3.Button, __assign({ colorScheme: "blue", onClick: function () {
+                                    setSelectedAction(action);
+                                    onOpen();
+                                } }, { children: action.name }), void 0)); }) }), void 0) }, void 0)); }, enableRowActions: true, renderRowActionMenuItems: function (obj) {
+                        return selectedPage.rowActions.map(function (rowAction) { return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, __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] }), void 0)); });
+                    } }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(react_3.Modal, __assign({ size: "6xl", isOpen: isOpen, onClose: onClose }, { children: [(0, jsx_runtime_1.jsx)(react_3.ModalOverlay, {}, void 0), (0, jsx_runtime_1.jsxs)(react_3.ModalContent, { children: [(0, jsx_runtime_1.jsx)(react_3.ModalHeader, { children: selectedAction.name }, void 0), (0, jsx_runtime_1.jsx)(react_3.ModalCloseButton, {}, void 0), (0, jsx_runtime_1.jsxs)(react_3.ModalBody, { children: [selectedAction.fields && ((_b = selectedAction.fields) === null || _b === void 0 ? void 0 : _b.length) > 0 ? ((0, jsx_runtime_1.jsx)(GenericForm_1.GenericForm, { action: selectedAction, onClose: onClose, rowId: rowId }, void 0)) : ((0, jsx_runtime_1.jsx)(react_3.Button, __assign({ colorScheme: "blue", mr: 3, onClick: function () {
+                                            selectedAction.onSubmit(rowId);
+                                            onClose();
+                                            window.location.reload();
+                                        } }, { children: "Confirm Action" }), void 0)), (0, jsx_runtime_1.jsx)(react_3.Button, __assign({ colorScheme: "red", mr: 3, onClick: onClose }, { children: "Close" }), void 0)] }, void 0)] }, void 0)] }), void 0)] }, void 0));
+}
+exports.Page = Page;

package/dist/cjs/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var client_1 = __importDefault(require("react-dom/client"));
+require("./index.css");
+var App_1 = __importDefault(require("./App"));
+var reportWebVitals_1 = __importDefault(require("./reportWebVitals"));
+var event_1 = require("./pages/event");
+var root = client_1.default.createRoot(document.getElementById("root"));
+root.render((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(App_1.default, { pages: [event_1.event], basePath: "" }, void 0) }, void 0));
+// 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
+(0, reportWebVitals_1.default)();

package/dist/cjs/pages/event.js

@@ -0,0 +1,110 @@
+"use strict";
+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 (_) 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 };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.event = void 0;
+var react_1 = __importDefault(require("react"));
+var domain = "http://localhost:3001";
+exports.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_1.default.createElement("img", {
+                        src: obj.imgUrl,
+                        alt: "ERROR",
+                        style: { width: "100px" },
+                    })
+                    : "No Image Available";
+            },
+        },
+    ],
+};