admin_lsac 1.0.1 → 1.1.2

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,79 @@
+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 function AdminPanel(props: AdminPanelProps): React.ReactElement;
+
+  interface PageProps {
+    pages: PageSchema[];
+    selectedPage: PageSchema;
+  }
+
+  export function Page(props: PageProps): React.ReactElement;
+}

package/dist/App.js

@@ -0,0 +1,14 @@
+"use strict";
+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");
+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] }) }) }));
+}
+exports.default = AdminPanel;

package/dist/components/GenericForm.js

@@ -0,0 +1,273 @@
+"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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 (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 };
+    }
+};
+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, { name: fieldName, children: function (_a) {
+            var _b;
+            var field = _a.field, form = _a.form;
+            return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { isInvalid: (0, formik_1.getIn)(form.touched, fieldName) && (0, formik_1.getIn)(form.errors, fieldName), children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, { marginTop: 2, children: formfield.label }), formfield.type === "string" || formfield.type === "number" ? ((0, jsx_runtime_1.jsx)(react_1.Input, __assign({}, field, { type: formfield.type === "number" ? "number" : "text", placeholder: "" }))) : 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]);
+                            }
+                        } })) : ((0, jsx_runtime_1.jsxs)(react_1.Select, __assign({}, field, { defaultValue: "", children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "", children: "Select an option!" }), (_b = formfield.options) === null || _b === void 0 ? void 0 : _b.map(function (option, key) { return ((0, jsx_runtime_1.jsx)("option", { value: "".concat(option.value), children: option.display }, key)); })] }))), (0, jsx_runtime_1.jsx)(react_1.FormErrorMessage, { children: (0, formik_1.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 (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, { 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, { marginTop: 2, children: formfield.label }), (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, { paddingLeft: 10, children: [(0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)("b", { children: "".concat(fieldName, ".").concat(index) }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { paddingLeft: 10, children: formfield.element.type === "object"
+                                                ? parseFields(formfield.element.fields, "".concat(fieldName, ".").concat(index))
+                                                : generateSingleField(formfield.element, "".concat(fieldName, ".").concat(index), key) }), (0, jsx_runtime_1.jsxs)(react_1.Button, { type: "button", colorScheme: "red", marginY: 2, onClick: function () { return remove(index); }, children: ["Remove ", "".concat(fieldName, ".").concat(index)] })] })); }), (0, jsx_runtime_1.jsxs)(react_1.Button, { 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*/];
+            }
+        });
+    });
+}
+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, {});
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(formik_1.Formik, { 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, { mt: 4, colorScheme: "teal", isLoading: isSubmitting, type: "submit", children: "Submit" })] }));
+            } }) }));
+}
+exports.GenericForm = GenericForm;

package/dist/components/Page.js

@@ -0,0 +1,95 @@
+"use strict";
+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;
+    var nav = (0, react_router_1.useNavigate)();
+    return ((0, jsx_runtime_1.jsx)(react_3.Box, { background: "blue.50", padding: 1, children: (0, jsx_runtime_1.jsxs)(react_3.Stack, { margin: 3, direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_3.Stack, { margin: 4, gap: 10, direction: "row", alignItems: "center", children: pages.map(function (p) { return ((0, jsx_runtime_1.jsx)(react_3.Box, { as: "a", href: (0, schema_1.pageToUrl)(p), children: p.name })); }) }), (0, jsx_runtime_1.jsx)(react_3.Stack, { direction: "row", children: (0, jsx_runtime_1.jsx)(react_3.Button, { 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 = (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;
+    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 }), (0, jsx_runtime_1.jsx)(react_4.ThemeProvider, { 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, { margin: 0, padding: 3, direction: "row", children: selectedPage.actions.map(function (action) { return ((0, jsx_runtime_1.jsx)(react_3.Button, { colorScheme: "blue", onClick: function () {
+                                    setSelectedAction(action);
+                                    onOpen();
+                                }, children: action.name })); }) }) })); }, enableRowActions: true, renderRowActionMenuItems: function (obj) {
+                        return selectedPage.rowActions.map(function (rowAction) { return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { 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] })); });
+                    } }) }), (0, jsx_runtime_1.jsxs)(react_3.Modal, { size: "6xl", isOpen: isOpen, onClose: onClose, children: [(0, jsx_runtime_1.jsx)(react_3.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_3.ModalContent, { children: [(0, jsx_runtime_1.jsx)(react_3.ModalHeader, { children: selectedAction.name }), (0, jsx_runtime_1.jsx)(react_3.ModalCloseButton, {}), (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 })) : ((0, jsx_runtime_1.jsx)(react_3.Button, { colorScheme: "blue", mr: 3, onClick: function () {
+                                            selectedAction.onSubmit(rowId);
+                                            onClose();
+                                            window.location.reload();
+                                        }, children: "Confirm Action" })), (0, jsx_runtime_1.jsx)(react_3.Button, { colorScheme: "red", mr: 3, onClick: onClose, children: "Close" })] })] })] })] }));
+}
+exports.Page = Page;

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;