admin_lsac 1.0.0

package/server/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "server",
+    "version": "1.0.0",
+    "description": "",
+    "main": "deploy.js",
+    "scripts": {
+      "start": "node deploy.js"
+    },
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+      "dotenv": "^16.0.1",
+      "express": "^4.18.1",
+      "fs": "^0.0.1-security",
+      "https": "^1.0.0",
+      "path": "^0.12.7"
+    }
+  }

package/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/App.tsx

@@ -0,0 +1,92 @@
+import { ChakraProvider } from "@chakra-ui/react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Page } from "./components/Page";
+import { pageToUrl } from "./schema/schema";
+import * as React from "react";
+
+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[];
+}
+
+function AdminPanel({ pages }: { pages: PageSchema[] }) {
+  return (
+    <ChakraProvider>
+      <BrowserRouter>
+        <Routes>
+          {pages.map((page) => (
+            <Route
+              path={pageToUrl(page)}
+              element={<Page pages={pages} selectedPage={page} />}
+            />
+          ))}
+          {pages[0] ?
+            <Route
+              path="*"
+              element={<Page pages={pages} selectedPage={pages[0]} />}
+            />
+            : null}
+        </Routes>
+      </BrowserRouter>
+    </ChakraProvider>
+  );
+}
+
+export default AdminPanel;

package/src/components/GenericForm.tsx

@@ -0,0 +1,281 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Select,
+} from "@chakra-ui/react";
+import { Field, Form, Formik, FieldArray, getIn } from "formik";
+import {
+  Action,
+  FormField,
+  SimpleField,
+  DropdownField,
+  RowAction,
+} from "../schema/schema";
+import * as Yup from "yup";
+import Swal from "sweetalert2";
+import { useEffect, useState } from "react";
+
+interface GenericFormProps {
+  action: Action | RowAction;
+  onClose?: () => void;
+  rowId?: number;
+}
+
+function parseValidation(fields: FormField[] | undefined) {
+  if (!fields) {
+    return {};
+  }
+
+  return fields.reduce((acc: any, 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: SimpleField | DropdownField,
+  fieldName: string,
+  key: any
+) {
+  return (
+    <Field name={fieldName} key={key}>
+      {({ field, form }: any) => (
+        <FormControl
+          isInvalid={
+            getIn(form.touched, fieldName) && getIn(form.errors, fieldName)
+          }
+          // paddingLeft={40 * countIndent(fieldName)}
+        >
+          <FormLabel marginTop={2}>{formfield.label}</FormLabel>
+
+          {formfield.type === "string" || formfield.type === "number" ? (
+            <Input
+              {...field}
+              type={formfield.type === "number" ? "number" : "text"}
+              placeholder=""
+            />
+          ) : formfield.type === "file" ? (
+            <Input
+              type="file"
+              name={fieldName}
+              onChange={(event) => {
+                if (event.currentTarget.files != null) {
+                  form.setFieldValue(fieldName, event.currentTarget.files[0]);
+                }
+              }}
+            />
+          ) : (
+            <Select {...field} defaultValue="">
+              <option disabled={true} value="">
+                Select an option!
+              </option>
+              {(formfield as DropdownField).options?.map((option, key) => (
+                <option key={key} value={`${option.value}`}>
+                  {option.display}
+                </option>
+              ))}
+            </Select>
+          )}
+
+          <FormErrorMessage>{getIn(form.errors, fieldName)}</FormErrorMessage>
+        </FormControl>
+      )}
+    </Field>
+  );
+}
+
+function parseFields(
+  fields: FormField[] | undefined,
+  previous?: string | undefined
+) {
+  if (!fields) {
+    return [];
+  }
+
+  const computedFields = fields.map((formfield, key) => {
+    let fieldName: string =
+      previous !== undefined ? previous + "." + formfield.name : formfield.name;
+
+    if (formfield.type === "object") {
+      const objectFields = parseFields(formfield.fields, fieldName);
+      return <FormControl key={fieldName}>{objectFields}</FormControl>;
+    } else if (formfield.type === "array") {
+      return (
+        <FieldArray name={fieldName}>
+          {({ remove, push, form }) => (
+            <div>
+              <FormLabel marginTop={2}>{formfield.label}</FormLabel>
+              {getIn(form.values, fieldName).length > 0 &&
+                getIn(form.values, fieldName).map(
+                  (element: any, index: number) => (
+                    <Box paddingLeft={10}>
+                      <h4>
+                        <b>{`${fieldName}.${index}`}</b>
+                      </h4>
+                      <Box paddingLeft={10}>
+                        {formfield.element.type === "object"
+                          ? parseFields(
+                              formfield.element.fields,
+                              `${fieldName}.${index}`
+                            )
+                          : generateSingleField(
+                              formfield.element,
+                              `${fieldName}.${index}`,
+                              key
+                            )}
+                      </Box>
+                      <Button
+                        type="button"
+                        colorScheme="red"
+                        marginY={2}
+                        onClick={() => remove(index)}
+                      >
+                        Remove {`${fieldName}.${index}`}
+                      </Button>
+                    </Box>
+                  )
+                )}
+
+              <Button
+                type="button"
+                marginY={2}
+                colorScheme="blue"
+                onClick={() => {
+                  let value = undefined;
+
+                  if (formfield.element.type === "object") {
+                    value = getInitialValues(formfield.element.fields);
+                  } else {
+                    value = getInitialValues([formfield.element])[0];
+                  }
+
+                  push(value);
+                }}
+              >
+                Add {fieldName}
+              </Button>
+            </div>
+          )}
+        </FieldArray>
+      );
+    } else {
+      return generateSingleField(formfield, fieldName, key);
+    }
+  });
+
+  return computedFields;
+}
+
+function getInitialValues(fields: FormField[] | undefined) {
+  let obj: any = {};
+
+  if (!fields) {
+    return obj;
+  }
+
+  fields.forEach((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;
+}
+
+async function setOptions(fields: FormField[] | undefined) {
+  if (!fields) {
+    return;
+  }
+
+  const promises = fields.map(async (field) => {
+    if (field.type === "dropdown") field.options = await field.getOptions();
+    else if (field.type === "array") await setOptions([field.element]);
+    else if (field.type === "object") await setOptions(field.fields);
+  });
+
+  await Promise.all(promises);
+}
+
+export function GenericForm({ action, onClose, rowId }: GenericFormProps) {
+  const [formFields, setFormFields] = useState<any[]>(
+    parseFields(action.fields)
+  );
+  const [initialValues] = useState<any>(getInitialValues(action.fields));
+  const [validationSchema] = useState<any>(parseValidation(action.fields));
+
+  useEffect(() => {
+    setOptions(action.fields).then(() => {
+      setFormFields(parseFields(action.fields));
+    });
+  }, []);
+
+  if (!action.fields) return <></>;
+  return (
+    <>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={Yup.object(validationSchema)}
+        onSubmit={async (values) => {
+          try {
+            let res;
+            if (rowId) res = await action.onSubmit(values, rowId);
+            else res = await action.onSubmit(values);
+
+            if (onClose) onClose();
+
+            Swal.fire("Ok");
+          } catch (e: any) {
+            if (onClose) onClose();
+            const err = e.request.response;
+
+            Swal.fire({
+              text: "Error: " + err,
+            });
+          }
+        }}
+      >
+        {({ isSubmitting }) => (
+          <Form>
+            {formFields}
+            <Button
+              mt={4}
+              colorScheme="teal"
+              isLoading={isSubmitting}
+              type="submit"
+            >
+              Submit
+            </Button>
+          </Form>
+        )}
+      </Formik>
+    </>
+  );
+}

package/src/components/Page.tsx

@@ -0,0 +1,207 @@
+import { useEffect, useState } from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { PageSchema, Action, 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({ pages, data }: { pages: PageSchema[]; data: any[] }) {
+  const nav = useNavigate();
+  return (
+    <Box background="blue.50" padding={1}>
+      <Stack
+        margin={3}
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Stack margin={4} gap={10} direction="row" alignItems="center">
+          {pages.map((p) => (
+            <Box as="a" href={pageToUrl(p)}>
+              {p.name}
+            </Box>
+          ))}
+        </Stack>
+        <Stack direction="row">
+          <Button
+            colorScheme="red"
+            onClick={() => {
+              const filename = prompt("Enter filename:");
+              if (filename) exportToCSV(data, filename);
+            }}
+          >
+            Export Data
+          </Button>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
+
+function exportToCSV(data: any[], filename: string) {
+  const formatImageData = (obj: any) => {
+    const formattedObj: any = {};
+    for (const key in obj) {
+      if (typeof obj[key] !== "object") {
+        formattedObj[key] = obj[key];
+      }
+    }
+    return formattedObj;
+  };
+
+  const formattedData = data.map(formatImageData);
+
+  const csvConfig = mkConfig({
+    useKeysAsHeaders: true,
+    filename: filename,
+  });
+
+  if (formattedData.length > 0) {
+    const 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({
+  pages,
+  selectedPage,
+}: {
+  pages: PageSchema[];
+  selectedPage: PageSchema;
+}) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [selectedAction, setSelectedAction] = useState({} as Action);
+  const [data, setData] = useState<any[]>([]);
+  const [displayData, setDisplayData] = useState<any[][]>([]);
+  const [rowId, setRowId] = useState<number>();
+
+  useEffect(() => {
+    selectedPage.getRequest().then((resArray) => {
+      setData(resArray);
+    });
+  }, []);
+
+  useEffect(() => {
+    setDisplayData(
+      data.map((table_data) =>
+        selectedPage.tableFields.map((field) => field.access(table_data))
+      )
+    );
+  }, [data]);
+
+  return (
+    <>
+      <Header pages={pages} data={data} />
+
+      <ThemeProvider theme={createTheme()}>
+        <MaterialReactTable
+          columns={selectedPage.tableFields.map((field, index) => ({
+            accessorFn: (row: any) => row[index],
+            header: field.name,
+          }))}
+          data={displayData}
+          muiTableContainerProps={{ sx: { maxHeight: "70vh" } }}
+          enableColumnResizing
+          enableColumnPinning
+          enableGlobalFilterModes
+          enablePagination={true}
+          paginationDisplayMode="pages"
+          enableRowVirtualization
+          rowVirtualizerOptions={{ overscan: 20 }}
+          renderTopToolbarCustomActions={() => (
+            <ChakraProvider>
+              <Stack margin={0} padding={3} direction="row">
+                {selectedPage.actions.map((action) => (
+                  <Button
+                    colorScheme="blue"
+                    onClick={() => {
+                      setSelectedAction(action);
+                      onOpen();
+                    }}
+                  >
+                    {action.name}
+                  </Button>
+                ))}
+              </Stack>
+            </ChakraProvider>
+          )}
+          enableRowActions
+          renderRowActionMenuItems={(obj) => {
+            return selectedPage.rowActions.map((rowAction) => (
+              <MenuItem
+                onClick={() => {
+                  setSelectedAction(rowAction);
+                  setRowId(obj.row.original[0]);
+                  onOpen();
+
+                  const rowActionsMenu = document.querySelector(
+                    ".MuiPaper-root.MuiPopover-paper.MuiMenu-paper"
+                  );
+                  if (rowActionsMenu) {
+                    rowActionsMenu.remove();
+                  }
+                }}
+              >
+                {rowAction.name + " " + obj.row.original[0]}
+              </MenuItem>
+            ));
+          }}
+        />
+      </ThemeProvider>
+
+      <Modal size={"6xl"} isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{selectedAction.name}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            {selectedAction.fields && selectedAction.fields?.length > 0 ? (
+              <GenericForm
+                action={selectedAction}
+                onClose={onClose}
+                rowId={rowId}
+              />
+            ) : (
+              <Button
+                colorScheme="blue"
+                mr={3}
+                onClick={() => {
+                  selectedAction.onSubmit(rowId);
+                  onClose();
+                  window.location.reload();
+                }}
+              >
+                Confirm Action
+              </Button>
+            )}
+            <Button colorScheme="red" mr={3} onClick={onClose}>
+              Close
+            </Button>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

package/src/index.css

@@ -0,0 +1,13 @@
+html, body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/src/index.tsx

@@ -0,0 +1,20 @@
+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";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <AdminPanel pages={[event]} />
+  </React.StrictMode>
+);
+
+// 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/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>