admin_lsac

Generic Admin Panel

For configuring your own admin panel, follow the next instructions.

npm install admin_lsac

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

For more details, especially about page schemas, contact the owner. :)