vs-admin-fe

FE Admin boot Project

Admin Boot Lib is a comprehensive library designed to accelerate the development of robust and feature-rich admin panels. By providing a foundation of essential components and tools, it significantly streamlines the development process.

Environment Variables

To run this project, you will need to add the following environment variables to your .env.development file

VITE_API_KEY

VITE_AUTH_DOMAIN

VITE_DATABASE_URL

VITE_PROJECT_ID

VITE_STORAGE_BUCKET

VITE_MESSAGING_SENDER_ID

VITE_APP_ID

Tech Stack

Client: React, Zod + react-hook-form,@tanstack/react-query,@mui/material

Server: Mockapi (for demo)

Usage/Examples

import { FieldEnum } from 'components/form/AdminForm';
import { z } from 'zod';

import { IJsonData } from '@types';

import { InputPresets } from '../../constants/input-field-constants';

const schema = z.object({
  role: z.string().min(1, { message: 'Role is required' })
});
// write schema for validation in add/edit form

export type ISubmittedDataType = z.infer<typeof schema> | { id: string };

export const DATA: IJsonData<ISubmittedDataType> = {
  key: 'users', // used for api calls. Please update the BASE url in `api-contant.ts`
  title: 'Users', // will be shown  as page title
  columnVisibility: {. // control will fields will not be visible in the table
    availableOfficeTiming: false,
    interviewScheduleDates: false,
  },
  columns: [
    { field: 'id', // unique id and it should present in schema
     headerName: 'ID', // whill be used as for title in form and table header
      sortable: true // make it true for the fields which need to apply sorting. It will be server based sorting
       },
    {
      field: 'role',
      headerName: 'Role',
      fieldProps: { // this is for add/edit form. You can pass its fieldType and its props from here.
        fieldType: FieldEnum.Dropdown, // type of field.
        data: [
          { id: 'admin', label: 'Admin' },
          { id: 'guest', label: 'Guest' },
        ],
      },
    },
    {
      field: 'rating',
      headerName: 'value',
      fieldProps: {
        fieldType: FieldEnum.Text,
        preset: InputPresets.Number,
      },
      filterProps: { // you customize like in this scenario you need a slider for filter. if not given field props is applicable on filter as well.
        fieldType: FieldEnum.Slider,
      },
      sortable: true,
    },
  ],
  enableExport: true,
  actions: { // control the action from here. for an item.
    edit: true,
    delete: true,
    view: true,
    add: true,
    filter: true,
  },
  pagination: true,
  schema: schema,
  defaultValues: {
    role: '',
  },
};



import { Layout } from '@components';

import { DATA } from './userPage-data';

const UserPage = () => {
  return <Layout data={DATA} />;
};

export default UserPage;

Add Detail page

For adding detail page for any layout based page. Go to common-contant.ts and add your detail page component there. That component will get row that your clicked or want to view.

// Add your detail page here
export const DetailsPageComponents = {
  users: UserDetailPage, // component with the same key you provided as `key` in data.
};

App json

By using this your can control the following. Make required changes in app-config.ts

export const APP_CONFIG = {
  appName: 'VS Admin Panel',
  loginMessageTitle: 'Welcome',
  loginMessage:
    'Please log in to access, manage, and monitor the administrative features of the system securely.',
  LoginIcon: AdminPanelSettingsIcon,
  loginTitle: 'Admin Login',
};

Dashbaord

Your can manipulate order of charts in dashboard using this json. Written in dashboard-data.ts:

import { ChartType, StatCardAlignment } from './constants';

export const DASHBOARD_DATA = {
  key: 'dashboard',
  title: 'Analytics Dashboard',
  statsData: [
    {
      alignment: StatCardAlignment.Horizontal,
      icon: BarChart,
      title: '200',
      subtitle: 'Total Users',
      stat: '10% increase in activity',
      color: '#fff',
    },
    {
      alignment: StatCardAlignment.Horizontal,
      color: '#fff',
      icon: MonetizationOn,
      title: '300',
      subtitle: 'Total Order',
      stat: '+ 5% from yesterday',
    },
    {
      alignment: StatCardAlignment.Horizontal,
      color: '#FFFBF5',
      icon: Tour,
      title: '20',
      subtitle: 'New Users',
      stat: '+ 15% from yesterday',
    },
    {
      alignment: StatCardAlignment.Horizontal,
      color: '#FFFBF5',
      icon: TrendingUp,
      title: '100',
      subtitle: 'Products Sold',
      stat: '10% from yesterday',
    },
    {
      alignment: StatCardAlignment.Horizontal,
      color: '#FFE5E5',
      icon: TrendingUp,
      title: '$ 1000',
      subtitle: 'Total Revenue',
      stat: '10% from yesterday',
    },
    {
      alignment: StatCardAlignment.Horizontal,
      color: '#FFE5E5',
      icon: TrendingUp,
      title: '$ 1000',
      subtitle: 'Total Revenue',
      stat: '10% from yesterday',
    },
  ],
  totalActivity: 75,
  charts: [
    {
      chartLabel: 'Bar Chart',
      chartType: ChartType.Bar,
    },
    {
      chartLabel: 'Composed Chart',
      chartType: ChartType.Composed,
    },
    {
      chartLabel: 'Area Chart',
      chartType: ChartType.Area,
    },
    {
      chartLabel: 'Radar Chart',
      chartType: ChartType.Radar,
    },
    {
      chartLabel: 'Line Chart',
      chartType: ChartType.Line,
    },
    {
      chartLabel: 'Pie Chart',
      chartType: ChartType.Pie,
    },
  ],
};