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.

What do you need to import?

import { ChakraProvider } from '@chakra-ui/react'

import { pageToUrl } from 'admin_lsac'

import { AdminPage } from 'admin_lsac'

You can import these in App.js / App.ts. If your project is TypeScript-based, you need to write the following line as well:

import { PageSchema } from 'admin_lsac'

• Import the component from above where you want to write your schemas. (See below for details about schemas)

You need to create an array of schemas for your own admin panel. You can write the following inside your Routes component from App.js / App.ts:

{your_array.map((page) => (
  <Route
    path={`${your_url_to_admin_panel}/${pageToUrl(page)}`}
    element={
      <AdminPage
        pages={your_array}
        selectedPage={page}
        basePath={your_url_to_admin_panel}
      />
    }
  />
))}
{your_array[0] ? (
  <Route
    path={`${your_url_to_admin_panel}/*`}
    element={
      <AdminPage
        pages={your_array}
        selectedPage={your_array[0]}
        basePath={your_url_to_admin_panel}
      />
    }
  />
) : null}

⚠️ Don't forget to wrap the Router component into a ChakraProvider component.

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)

An array of schemas would be defined as follows:

const your_array = [
    {
        // schema 1
    },
    {
        // schema 2
    },
    ...
];

• In TypeScript, it would slightly change:

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. :)