admin_lsac 2.0.22 → 2.0.24

package/README.md

@@ -33,7 +33,7 @@ Import the component from above where you want to write your schemas! (See below
       <AdminPage
         pages={your_array}
         selectedPage={page} // 'page' param from above
-        basePath={your_url_to_admin_panel}
+        basePath={your_url_to_admin_panel} // use '', NOT '/' if at root
         apiURL={your_url_to_backend} // optional, for websockets
       />
     }
@@ -46,7 +46,7 @@ Import the component from above where you want to write your schemas! (See below
       <AdminPage
         pages={your_array}
         selectedPage={your_array[0]}
-        basePath={your_url_to_admin_panel}
+        basePath={your_url_to_admin_panel} // use '', NOT '/' if at root
         apiURL={your_url_to_backend} // optional, for websockets
       />
     }

package/admin_lsac.d.ts

@@ -7,7 +7,7 @@ declare module 'admin_lsac' {
     name: string;
     label: string;
     type: 'string' | 'number' | 'file' | 'date' | 'datetime-local' | 'time';
-    validationSchema: any;
+    validationSchema?: any;
   }
   export interface Option {
     value: string | number | boolean;
@@ -37,12 +37,12 @@ declare module 'admin_lsac' {
   export interface Action {
     name: string;
     fields?: FormField[];
-    onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
+    onSubmit: (obj1?: any, obj2?: any, obj3?: any) => Promise<any>;
   }
   export interface RowAction {
     name: string;
     fields?: FormField[];
-    initialise?: (obj: any) => Promise<any>;
+    initialise?: (rowId: any) => Promise<any>;
     onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
   }
   export interface PageSchema {

package/dist/esm/src/admin_lsac.d.ts

@@ -7,7 +7,7 @@ declare module 'admin_lsac' {
     name: string;
     label: string;
     type: 'string' | 'number' | 'file' | 'date' | 'datetime-local' | 'time';
-    validationSchema: any;
+    validationSchema?: any;
   }
   export interface Option {
     value: string | number | boolean;
@@ -37,12 +37,12 @@ declare module 'admin_lsac' {
   export interface Action {
     name: string;
     fields?: FormField[];
-    onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
+    onSubmit: (obj1?: any, obj2?: any, obj3?: any) => Promise<any>;
   }
   export interface RowAction {
     name: string;
     fields?: FormField[];
-    initialise?: (obj: any) => Promise<any>;
+    initialise?: (rowId: any) => Promise<any>;
     onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
   }
   export interface PageSchema {

package/dist/esm/src/components/AdminPage.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useRef } from 'react';
-import { ChakraProvider } from '@chakra-ui/react';
-import { Button, Modal, ModalHeader, ModalBody, useDisclosure, ModalOverlay, ModalContent, ModalCloseButton, Box, Stack, } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalOverlay, ModalContent, ModalCloseButton, useDisclosure, Box, Stack, ChakraProvider, } from '@chakra-ui/react';
 import { GenericForm } from './GenericForm';
 import { ThemeProvider } from '@emotion/react';
 import { createTheme } from '@mui/material/styles';
@@ -29,7 +28,20 @@ function exportToCSV(data, filename) {
         filename: filename,
     });
     if (data.length > 1) {
-        const csv = generateCsv(csvConfig)(data);
+        const filteredData = data.map((row) => {
+            const cleaned = {};
+            for (const key in row) {
+                const value = row[key];
+                if (typeof value === 'string' ||
+                    typeof value === 'number' ||
+                    typeof value === 'boolean' ||
+                    value === null) {
+                    cleaned[key] = value;
+                }
+            }
+            return cleaned;
+        });
+        const csv = generateCsv(csvConfig)(filteredData);
         download(csvConfig)(csv);
     }
     else {
@@ -66,28 +78,21 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
         });
     }, [socket, selectedPage]);
     useEffect(() => {
-        setDisplayData(data.map((table_data) => selectedPage.tableFields.map((field) => field.access(table_data))));
+        setDisplayData(data.map((row) => selectedPage.tableFields.map((field) => field.access(row))));
     }, [data]);
-    const headerRef = useRef(null);
-    const [tableHeight, setTableHeight] = useState('80vh');
-    useEffect(() => {
-        const updateTableHeight = () => {
-            if (headerRef.current) {
-                const headerHeight = headerRef.current.clientHeight;
-                setTableHeight(`calc(88vh - ${headerHeight}px)`);
-            }
-        };
-        updateTableHeight();
-    }, []);
-    return (_jsxs(ChakraProvider, { children: [_jsx(Box, { ref: headerRef, children: _jsx(Header, { pages: pages, data: [selectedPage.tableFields.map((field) => field.name), ...displayData], basePath: basePath }) }), _jsx(ThemeProvider, { theme: createTheme(), children: _jsx(MaterialReactTable, { columns: selectedPage.tableFields.map((field, index) => ({
+    return (_jsxs(ChakraProvider, { children: [_jsx(Box, { children: _jsx(Header, { pages: pages, data: [selectedPage.tableFields.map((field) => field.name), ...displayData], basePath: basePath }) }), _jsx(ThemeProvider, { theme: createTheme(), children: _jsx(MaterialReactTable, { columns: selectedPage.tableFields.map((field, colIndex) => ({
                         accessorFn: (row) => {
-                            if (typeof row[index] === 'boolean') {
-                                row[index] = String(row[index]);
-                            }
-                            return row[index];
+                            const value = row[colIndex];
+                            return typeof value === 'boolean' ? String(value) : value;
                         },
                         header: field.name,
-                    })), data: displayData, muiTableContainerProps: { sx: { height: tableHeight } }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: false, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: () => (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 2, direction: "row", wrap: "wrap", children: selectedPage.actions.map((action, index) => (_jsx(Button, { colorScheme: "blue", onClick: () => {
+                    })), data: displayData, muiTableContainerProps: {
+                        sx: {
+                            maxHeight: 'none',
+                            overflowY: 'visible',
+                            overflowX: 'auto',
+                        },
+                    }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: false, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: () => (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 2, direction: "row", wrap: "wrap", children: selectedPage.actions.map((action, index) => (_jsx(Button, { colorScheme: "blue", onClick: () => {
                                     setSelectedAction(action);
                                     onOpen();
                                 }, children: action.name }, index))) }) })), enableRowActions: true, renderRowActionMenuItems: (obj) => {
@@ -107,9 +112,12 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
                                             if (rowObject !== undefined) {
                                                 selectedAction.onSubmit(rowId, rowObject);
                                             }
-                                            else {
+                                            else if (rowId !== undefined) {
                                                 selectedAction.onSubmit(rowId);
                                             }
+                                            else {
+                                                selectedAction.onSubmit();
+                                            }
                                             onClose();
                                         }, children: "Confirm Action" })), _jsx(Button, { colorScheme: "red", mr: 3, onClick: onClose, children: "Close" })] })] })] })] }));
 }

package/dist/esm/src/components/GenericForm.js

@@ -9,7 +9,15 @@ function generateSingleField(formfield, fieldName, key) {
                     formfield.type === 'number' ||
                     formfield.type === 'date' ||
                     formfield.type === 'datetime-local' ||
-                    formfield.type === 'time' ? (_jsx(Input, { ...field, value: field.value ?? '', type: formfield.type !== 'string' ? formfield.type : 'text' })) : formfield.type === 'file' ? (_jsx(Input, { type: "file", name: fieldName, onChange: (event) => {
+                    formfield.type === 'time' ? (_jsx(Input, { ...field, value: field.value
+                        ? formfield.type === 'date'
+                            ? field.value.substring(0, 10) // "YYYY-MM-DD"
+                            : formfield.type === 'time'
+                                ? new Date(field.value).toISOString().substring(11, 16) // "HH:mm"
+                                : formfield.type === 'datetime-local'
+                                    ? new Date(field.value).toISOString().substring(0, 16) // "YYYY-MM-DDTHH:mm"
+                                    : field.value
+                        : '', type: formfield.type !== 'string' ? formfield.type : 'text' })) : formfield.type === 'file' ? (_jsx(Input, { type: "file", name: fieldName, onChange: (event) => {
                         if (event.currentTarget.files != null) {
                             form.setFieldValue(fieldName, event.currentTarget.files[0]);
                         }

package/dist/esm/src/main.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import { event } from './testSchemas/event';
+import { coursesPage } from './testSchemas/course';
 import './index.css';
-ReactDOM.createRoot(document.getElementById('root')).render(_jsx(React.StrictMode, { children: _jsx(App, { pages: [event], basePath: "" }) }));
+ReactDOM.createRoot(document.getElementById('root')).render(_jsx(React.StrictMode, { children: _jsx(App, { pages: [coursesPage], basePath: "" }) }));

package/dist/esm/src/schema.d.ts

@@ -6,7 +6,7 @@ export interface SimpleField {
     name: string;
     label: string;
     type: 'string' | 'number' | 'file' | 'date' | 'datetime-local' | 'time';
-    validationSchema: any;
+    validationSchema?: any;
 }
 export interface Option {
     value: string | number | boolean;
@@ -36,12 +36,12 @@ export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
 export interface Action {
     name: string;
     fields?: FormField[];
-    onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
+    onSubmit: (obj1?: any, obj2?: any, obj3?: any) => Promise<any>;
 }
 export interface RowAction {
     name: string;
     fields?: FormField[];
-    initialise?: (obj: any) => Promise<any>;
+    initialise?: (rowId: any) => Promise<any>;
     onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
 }
 export interface PageSchema {

package/dist/esm/src/testSchemas/course.d.ts

@@ -0,0 +1,2 @@
+import { PageSchema } from '../schema';
+export declare const coursesPage: PageSchema;

package/dist/esm/src/testSchemas/course.js

@@ -0,0 +1,342 @@
+import React from 'react';
+import axios from 'axios';
+import * as Yup from 'yup';
+const domain = 'http://localhost:3001';
+// Please try to modularize the code for a schema though
+export const coursesPage = {
+    name: 'Courses',
+    // 1. Data retrieval: fetch all courses from backend
+    getRequest: async () => {
+        const res = await axios.get(`${domain}/courses`);
+        return res.data; // returns an array of course objects
+    },
+    // 2. Table fields: define columns for the courses table
+    tableFields: [
+        {
+            name: 'Course ID',
+            // The ID should be first column to allow rowActions to reference it (if rowActions needed)
+            access: (obj) => obj.id,
+        },
+        {
+            name: 'Name',
+            access: (obj) => obj.name,
+        },
+        {
+            name: 'Level',
+            access: (obj) => obj.level,
+        },
+        {
+            name: 'Credits',
+            access: (obj) => obj.credits,
+        },
+        {
+            name: 'Start Date',
+            access: (obj) => (obj.startDate ? new Date(obj.startDate).toLocaleDateString() : 'N/A'),
+        },
+        {
+            name: 'Instructor',
+            // Display instructor name (assuming obj.instructor has { name, email })
+            access: (obj) => (obj.instructor ? obj.instructor.name : 'N/A'),
+        },
+        {
+            name: 'Course Image',
+            // Use React.createElement to render an image
+            access: (obj) => obj.coverImage
+                ? React.createElement('img', {
+                    src: `${domain}${obj.coverImage}`,
+                    alt: 'Cover Image',
+                    style: { width: '100px' },
+                })
+                : 'No Image',
+        },
+    ],
+    // 3. Global actions (top-level page actions)
+    actions: [
+        {
+            name: 'Ping Server',
+            // No form, no arguments: simple request to '/ping'
+            onSubmit: async () => {
+                const res = await axios.get(`${domain}/courses/ping`);
+                return res.data;
+            },
+        },
+        {
+            name: 'Create Course',
+            // Form with one argument (formValues) on submit
+            fields: [
+                {
+                    // Course Name
+                    name: 'name',
+                    label: 'Course Name',
+                    type: 'string',
+                    validationSchema: Yup.string().required('Name is required'),
+                },
+                {
+                    // Level (Undergraduate/Graduate dropdown)
+                    name: 'level',
+                    label: 'Level',
+                    type: 'dropdown',
+                    validationSchema: Yup.string().required('Level is required'),
+                    getOptions: async () => [
+                        { value: 'Undergraduate', display: 'Undergraduate' },
+                        { value: 'Graduate', display: 'Graduate' },
+                    ],
+                },
+                {
+                    // Credits
+                    name: 'credits',
+                    label: 'Credits',
+                    type: 'number',
+                    validationSchema: Yup.number().required('Credits are required'),
+                },
+                {
+                    // Start Date
+                    name: 'startDate',
+                    label: 'Start Date',
+                    type: 'date',
+                    validationSchema: Yup.date().required('Start date is required'),
+                },
+                {
+                    // Instructor (object with name and email)
+                    name: 'instructor',
+                    label: 'Instructor',
+                    type: 'object',
+                    fields: [
+                        {
+                            name: 'name',
+                            label: 'Instructor Name',
+                            type: 'string',
+                            validationSchema: Yup.string().required('Instructor name is required'),
+                        },
+                        {
+                            name: 'email',
+                            label: 'Instructor Email',
+                            type: 'string',
+                            validationSchema: Yup.string()
+                                .email('Invalid email')
+                                .required('Instructor email is required'),
+                        },
+                    ],
+                },
+                {
+                    // Schedule (array of sessions with date and topic)
+                    name: 'schedule',
+                    label: 'Schedule',
+                    type: 'array',
+                    element: {
+                        name: '', // no specific name for array elements
+                        label: '', // (fields below define each session)
+                        type: 'object',
+                        fields: [
+                            {
+                                name: 'date',
+                                label: 'Date',
+                                type: 'date',
+                                validationSchema: Yup.date().required('Session date is required'),
+                            },
+                            {
+                                name: 'topic',
+                                label: 'Topic',
+                                type: 'string',
+                                validationSchema: Yup.string().required('Session topic is required'),
+                            },
+                        ],
+                    },
+                },
+                {
+                    // Cover Image (file upload)
+                    name: 'coverImage',
+                    label: 'Cover Image',
+                    type: 'file',
+                    validationSchema: Yup.mixed().required('Cover image is required'),
+                },
+            ],
+            onSubmit: async (formValues) => {
+                // Create a new course
+                const data = new FormData();
+                Object.entries(formValues).forEach(([k, v]) => {
+                    if (k === 'coverImage') {
+                        if (v instanceof File)
+                            data.append('coverImage', v);
+                    }
+                    else if (k === 'schedule') {
+                        data.append('schedule', JSON.stringify(v));
+                    }
+                    else if (k === 'instructor') {
+                        const instructor = v;
+                        data.append('instructor[name]', instructor.name);
+                        data.append('instructor[email]', instructor.email);
+                    }
+                    else {
+                        data.append(k, v);
+                    }
+                });
+                await axios.post(`${domain}/courses`, data, {
+                    headers: { 'Content-Type': 'multipart/form-data' },
+                });
+            },
+        },
+    ],
+    // 4. Row-specific actions (actions for each course row)
+    rowActions: [
+        {
+            name: 'Delete Course',
+            // No form; onSubmit uses one argument (rowId) to delete that course
+            onSubmit: async (courseId) => {
+                const res = await axios.delete(`${domain}/courses/${courseId}`);
+                return res.data;
+            },
+        },
+        {
+            name: 'Archive Course',
+            // No form; onSubmit uses two arguments (rowId and rowObject) to archive
+            onSubmit: async (courseId, course) => {
+                console.log(course); // you can do whatever you want with the course information
+                const res = await axios.patch(`${domain}/courses/${courseId}/archive`);
+                return res.data;
+            },
+        },
+        {
+            name: 'Edit Basic Info',
+            // Form (name, level, credits) with two arguments onSubmit (formValues, rowId)
+            fields: [
+                {
+                    name: 'name',
+                    label: 'Course Name',
+                    type: 'string',
+                    validationSchema: Yup.string().required('Name is required'),
+                },
+                {
+                    name: 'level',
+                    label: 'Level',
+                    type: 'dropdown',
+                    validationSchema: Yup.string().required('Level is required'),
+                    getOptions: async () => [
+                        { value: 'Undergraduate', display: 'Undergraduate' },
+                        { value: 'Graduate', display: 'Graduate' },
+                    ],
+                },
+                {
+                    name: 'credits',
+                    label: 'Credits',
+                    type: 'number',
+                    validationSchema: Yup.number().required('Credits are required'),
+                },
+            ],
+            onSubmit: async (formValues, courseId) => {
+                // Update course basic info
+                const res = await axios.patch(`${domain}/courses/${courseId}`, formValues);
+                return res.data;
+            },
+        },
+        {
+            name: 'Edit Full Course',
+            // Form (all course fields) with three arguments onSubmit (formValues, rowId, rowObject)
+            fields: [
+                {
+                    name: 'name',
+                    label: 'Course Name',
+                    type: 'string',
+                    validationSchema: Yup.string().required('Name is required'),
+                },
+                {
+                    name: 'level',
+                    label: 'Level',
+                    type: 'dropdown',
+                    validationSchema: Yup.string().required('Level is required'),
+                    getOptions: async () => [
+                        { value: 'Undergraduate', display: 'Undergraduate' },
+                        { value: 'Graduate', display: 'Graduate' },
+                    ],
+                },
+                {
+                    name: 'credits',
+                    label: 'Credits',
+                    type: 'number',
+                    validationSchema: Yup.number().required('Credits are required'),
+                },
+                {
+                    name: 'startDate',
+                    label: 'Start Date',
+                    type: 'date',
+                    validationSchema: Yup.date().required('Start date is required'),
+                },
+                {
+                    name: 'instructor',
+                    label: 'Instructor',
+                    type: 'object',
+                    fields: [
+                        {
+                            name: 'name',
+                            label: 'Instructor Name',
+                            type: 'string',
+                            validationSchema: Yup.string().required('Instructor name is required'),
+                        },
+                        {
+                            name: 'email',
+                            label: 'Instructor Email',
+                            type: 'string',
+                            validationSchema: Yup.string()
+                                .email('Invalid email')
+                                .required('Instructor email is required'),
+                        },
+                    ],
+                },
+                {
+                    name: 'schedule',
+                    label: 'Schedule',
+                    type: 'array',
+                    element: {
+                        name: '',
+                        label: '',
+                        type: 'object',
+                        fields: [
+                            {
+                                name: 'date',
+                                label: 'Date',
+                                type: 'date',
+                                validationSchema: Yup.date().required('Session date is required'),
+                            },
+                            {
+                                name: 'topic',
+                                label: 'Topic',
+                                type: 'string',
+                                validationSchema: Yup.string().required('Session topic is required'),
+                            },
+                        ],
+                    },
+                },
+                {
+                    name: 'coverImage',
+                    label: 'Cover Image',
+                    type: 'file',
+                    validationSchema: Yup.mixed().required('Cover image is required'),
+                },
+            ],
+            // Use initialise to fetch current course data and pre-fill the form
+            initialise: async (courseId) => {
+                const res = await axios.get(`${domain}/courses/${courseId}`);
+                return res.data; // return course object to populate the form
+            },
+            onSubmit: async (formValues, courseId, course) => {
+                // Update full course details
+                // Please note that you can include "initialise" and not the "rowObject" (or vice versa)
+                console.log(course); // you can do whatever you want with the course information
+                const data = new FormData();
+                data.append('name', formValues.name);
+                data.append('level', formValues.level);
+                data.append('credits', formValues.credits);
+                data.append('startDate', formValues.startDate);
+                data.append('instructor[name]', formValues.instructor.name);
+                data.append('instructor[email]', formValues.instructor.email);
+                data.append('schedule', JSON.stringify(formValues.schedule));
+                if (formValues.coverImage) {
+                    data.append('coverImage', formValues.coverImage);
+                }
+                await axios.patch(`${domain}/courses/${courseId}`, data, {
+                    headers: { 'Content-Type': 'multipart/form-data' },
+                });
+            },
+        },
+    ],
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin_lsac",
   "private": false,
-  "version": "2.0.22",
+  "version": "2.0.24",
   "description": "Generic Admin Panel created for storing events' data",
   "scripts": {
     "dev": "vite",

package/dist/esm/src/testSchemas/event.d.ts

@@ -1,2 +0,0 @@
-import { PageSchema } from '../schema';
-export declare const event: PageSchema;

package/dist/esm/src/testSchemas/event.js

@@ -1,117 +0,0 @@
-import axios from 'axios';
-import React from 'react';
-const domain = 'http://localhost:3001';
-export const event = {
-    name: 'Events',
-    actions: [],
-    rowActions: [
-        {
-            name: 'Delete Event - Variant 1', // without form
-            onSubmit: async (eventId) => {
-                // onSubmit has only param, the row's ID
-                const res = await axios.delete(domain + '/events/' + eventId);
-                return res.data;
-            },
-        },
-        {
-            name: 'Delete Event - Variant 2', // with form
-            fields: [
-                {
-                    name: 'input',
-                    label: 'Mock Field',
-                    type: 'string',
-                    validationSchema: '',
-                },
-                {
-                    name: 'type',
-                    label: 'Question Type',
-                    type: 'dropdown',
-                    // validationSchema is missing here (optional), so it will not be a required field
-                    getOptions: async () => [
-                        {
-                            value: 'OPEN',
-                            display: 'Open',
-                        },
-                        {
-                            value: 'SINGLE',
-                            display: 'Single',
-                        },
-                        {
-                            value: 'MULTIPLE',
-                            display: 'Multiple',
-                        },
-                    ],
-                },
-            ],
-            initialise: async (eventId) => {
-                const res = await axios.get(domain + '/events/' + eventId);
-                const obj = {};
-                obj.input = res.data.name;
-                return obj;
-            },
-            onSubmit: async (formValues, eventId) => {
-                // onSubmit has two params
-                // the first param - formValues, while the second is the row's ID
-                console.log(formValues);
-                const res = await axios.delete(domain + '/events/' + eventId);
-                return res.data;
-            },
-        },
-    ],
-    getRequest: async () => {
-        const res = await axios.get(domain + '/events');
-        return res.data;
-    },
-    tableFields: [
-        {
-            name: 'Id',
-            access: (obj) => obj.id,
-        },
-        {
-            name: 'Event Name',
-            access: (obj) => obj.name,
-        },
-        {
-            name: 'Description',
-            access: (obj) => obj.description,
-        },
-        {
-            name: 'Category',
-            access: (obj) => obj.category,
-        },
-        {
-            name: 'Ticket Type',
-            access: (obj) => obj.ticketType,
-        },
-        {
-            name: 'Date',
-            access: (obj) => obj.date,
-        },
-        {
-            name: 'Release',
-            access: (obj) => obj.release,
-        },
-        {
-            name: 'Is Released',
-            access: (obj) => (obj.isReleased ? 'Is Released' : 'Not Released'),
-        },
-        {
-            name: 'Available Tickets',
-            access: (obj) => obj.availableTickets,
-        },
-        {
-            name: 'Max Tickets',
-            access: (obj) => obj.maxTickets,
-        },
-        {
-            name: 'Image',
-            access: (obj) => obj.imgUrl
-                ? React.createElement('img', {
-                    src: obj.imgUrl,
-                    alt: 'ERROR',
-                    style: { width: '100px' },
-                })
-                : 'No Image Available',
-        },
-    ],
-};