yaml-admin-front 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yaml-admin-front",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "license": "MIT",
   "type": "module",
   "description": "React components for yaml-admin front (library)",
@@ -10,11 +10,14 @@
   },
   "dependencies": {
     "@iconify/react": "^6.0.0",
+    "@mui/x-tree-view": "^8.11.2",
+    "apexcharts": "^5.3.5",
     "axios": "^1.11.0",
     "js-yaml": "^4.1.0",
     "ra-data-json-server": "^5.10.1",
     "react": "^19.1.1",
     "react-admin": "^5.10.1",
+    "react-apexcharts": "^1.7.0",
     "react-dom": "^19.1.1",
     "yaml": "^2.8.1"
   },

package/src/YMLAdmin.jsx

@@ -13,6 +13,7 @@ import { AdminProvider } from './AdminContext';
 import authProvider from './login/authProvider';
 import { setApiHost } from './common/axios';
 import fileUploader from './common/fileUploader';
+import DashboardLayout from './section/DashboardLayout';
 
 const httpClient = (url, options = {}) => {
   if (!options.headers) {
@@ -67,7 +68,7 @@ const YMLAdmin = ({ adminYaml, i18nProvider, custom, theme, layout }) => {
       {dataProvider && <AdminProvider initialYml={yml} width="1250px">
         <Admin
           theme={{...defaultTheme, ...theme}}
-          dashboard={undefined}
+          dashboard={yml?.front?.dashboard ? DashboardLayout : undefined}
           layout={layout || MyLayout}
           authProvider={authProvider}
           i18nProvider={i18nProvider}

package/src/common/actionParser.jsx

@@ -0,0 +1,59 @@
+/**
+  - type: body
+    crud : list
+    entity: item
+    filter:
+        - name: region_id
+        value: $arg0
+    sort:
+        - name: seq
+        desc: false
+ * @param {*} action 
+ * @param {*} args 
+ * @returns 
+ */
+
+const act = (action, args, {navigate}) => {
+    if (!action || !action.type) return action
+    if (action.type === 'body') {
+        let { crud, entity, filter, sort } = action
+        let url = `/${entity}`
+
+        const filterObject = {}
+        if (Array.isArray(filter)) {
+            filter.forEach((f) => {
+                if (!f || !f.name) return
+                let value = f.value
+                if (typeof value === 'string' && value.startsWith('$arg')) {
+                    const index = parseInt(value.replace('$arg', ''), 10)
+                    if (Array.isArray(args)) value = args[index]
+                    else if (args && typeof args === 'object') value = args[index]
+                }
+                filterObject[f.name] = value
+            })
+        }
+
+        const params = new URLSearchParams()
+        if (Object.keys(filterObject).length > 0) {
+            params.set('filter', JSON.stringify(filterObject))
+        }
+
+        // sort: 첫 번째 정렬 조건만 사용 (react-admin과 호환: sort, order)
+        if (Array.isArray(sort) && sort.length > 0 && sort[0]?.name) {
+            params.set('sort', sort[0].name)
+            params.set('order', sort[0].desc ? 'DESC' : 'ASC')
+        }
+
+        const qs = params.toString()
+        const fullUrl = qs ? `${url}?${qs}` : url
+
+        if (typeof navigate === 'function') {
+            navigate(fullUrl)
+            return null
+        }
+        return fullUrl
+    }
+    return action
+}
+
+export { act }

package/src/common/field.jsx

@@ -1,90 +1,221 @@
 import {
     TextField, NumberField, ReferenceField, DateField, BooleanField,
     ReferenceInput, AutocompleteInput, TextInput,
-    SelectInput, FunctionField, ImageInput, ImageField, FileInput, FileField
+    SelectInput, FunctionField, ImageInput, ImageField, FileInput, FileField,
+    ArrayInput, ArrayField, SingleFieldList, Datagrid, SimpleFormIterator, BooleanInput,
+    DateInput, NumberInput,
 } from 'react-admin';
 import { Avatar } from '@mui/material';
 import ClickableImageField from '../component/ClickableImageField';
 import SafeImageField from '../component/SafeImageField';
 
-export const getFieldShow = (field, isList = false) => {
+/**
+ * 
+ * @param {*} field example {{
+    "name": "lock_list",
+    "label": "mylabel",
+    "type": "array",
+    "fields": [
+        {
+            "name": "member_no",
+            "type": "reference",
+            "reference_entity": "member",
+            "reference_match": "member_no",
+            "reference_name": "name"
+        },
+        {
+            "name": "reg_date",
+            "type": "date"
+        }
+    ]
+}}
+ * @param {*} field_path example "lock_list.member_no"
+ * @returns example {{
+    "name": "member_no",
+    "type": "reference",
+    "reference_entity": "member",
+    "reference_match": "member_no",
+    "reference_name": "name"
+    }}
+ */
+const findChildField = (field, field_path) => {
+    let field_path_array = field_path.split('.')
+    if (field_path_array.length == 1)
+        return field
+    else {
+        let child_field_name = field_path_array[1]
+        let field_path_rest = field_path_array.slice(1).join('.')
+        return findChildField(field.fields.find(f => f.name == child_field_name), field_path_rest)
+    }
+}
+
+export const getFieldShow = ({ field, isList, crud_field }) => {
+    let label = crud_field?.label || field.label
     if (!field || field.type == 'password') return null;
-    if (field.type == 'string' || field.key){
-        return <TextField key={field.name} label={field.label} source={field.name} />
+    if (field.type == 'string' || field.key) {
+        return <TextField key={field.name} label={label} source={field.name} />
     } else if (field.type == 'integer')
-        return <NumberField key={field.name} label={field.label} source={field.name} />
+        return <NumberField key={field.name} label={label} source={field.name} />
+    else if (field.type == 'length')
+        return <FunctionField key={field.name} label={label} render={record =>
+            <>
+                {record[field.name]?.length}
+            </>
+        } />
     else if (field.type == 'select')
-        return <FunctionField key={field.name} label={field.label} source={field.name}
+        return <FunctionField key={field.name} label={label} source={field.name}
             render={record => field.select_values.find(m => m.name == record[field.name])?.label} />
     else if (field.type == 'reference')
-        return <ReferenceField key={field.name} link="show" label={field.label} source={field.name} reference={field.reference_entity}>
-            <TextField source={field.reference_name} />
+        return <ReferenceField key={field.name} link="show" label={label} source={field.name} reference={field.reference_entity}>
+            {!field.reference_format && <TextField source={field.reference_name} />}
+            {field.reference_format && (() => {
+                    // Extract field names from the format string
+                    // e.g. "${name}(${phone})(${user_type})" => ['name', 'phone', 'user_type']
+                    const matches = [...field.reference_format.matchAll(/\$\{(\w+)\}/g)];
+                    const fieldNames = matches.map(m => m[1]);
+                    // Build a label string for TextField
+                    // e.g. "${name}(${phone})(${user_type})" => "{name}({phone})({user_type})"
+                    // We'll use FunctionField to render the formatted string
+                    return (
+                        <FunctionField
+                            render={record => {
+                                let str = field.reference_format;
+                                fieldNames.forEach(fn => {
+                                    str = str.replace(`\$\{${fn}\}`, record?.[fn] ?? '');
+                                });
+                                return str;
+                            }}
+                        />
+                    );
+                })()
+            }
         </ReferenceField>
     else if (field.type == 'date')
-        return <DateField key={field.name} label={field.label} source={field.name} showTime={field.showtime} />
+        return <DateField key={field.name} label={label} source={field.name} showTime={field.showtime} />
     else if (field.type == 'boolean')
-        return <BooleanField key={field.name} label={field.label} source={field.name} />
+        return <BooleanField key={field.name} label={label} source={field.name} />
     else if (field.type == 'objectId')
-        return <TextField key={field.name} label={field.label} source={field.name} />
-    else if (field.type == 'file') {
-        return <FunctionField key={field.name} label={field.label} render={record => 
+        return <TextField key={field.name} label={label} source={field.name} />
+    else if (field.type == 'array') {
+        if (crud_field?.name?.includes('.')) {
+            let child_field = findChildField(field, crud_field.name)
+            return <ArrayField key={field.name} source={field.name} label={label}>
+                <SingleFieldList linkType={false}>
+                    {getFieldShow({ field: child_field, isList })}
+                </SingleFieldList>
+            </ArrayField>
+        } else {
+            if (isList)
+                return <FunctionField key={field.name} label={label} render={record =>
+                    record?.[field.name]?.length || 0
+                } />
+            else {
+                return <ArrayField label={label} source={field.name} >
+                    <Datagrid bulkActionButtons={false} rowClick={false}>
+                        {field.fields.map(m => getFieldShow({ field: m, isList }))}
+                    </Datagrid>
+                </ArrayField>
+            }
+        }
+    } else if (field.type == 'file') {
+        return <FunctionField key={field.name} label={label} render={record =>
             <a href={record?.[field.name]?.image_preview} target="_blank">{record?.[field.name]?.title || 'Download'}</a>
         } />
     } else if (field.type == 'image') {
-        if(field.avatar)
-            return <FunctionField label={field.label} render={record =>
-                <Avatar alt="Natacha" src={record[field.name].image_preview} 
-                        sx={isList ? {width: 100, height: 100} : {width: 256, height: 256}}/>
+        if (field.avatar)
+            return <FunctionField label={label} render={record =>
+                <Avatar alt="Natacha" src={record[field.name].image_preview}
+                    sx={isList ? { width: 100, height: 100 } : { width: 256, height: 256 }} />
             } />
-        else 
-            return <ClickableImageField key={field.name} label={field.label} source={field.name} 
-                width={isList ? "100px" : "200px"} height={isList ? "100px" : "200px"}/>
-    } 
+        else
+            return <ClickableImageField key={field.name} label={label} source={field.name}
+                width={isList ? "100px" : "200px"} height={isList ? "100px" : "200px"} />
+    }
     else
-        return <TextField key={field.name} label={field.label} source={field.name} />
+        return <TextField key={field.name} label={label} source={field.name} />
 }
 
 const required = (message = 'ra.validation.required') =>
     value => value ? undefined : message;
 const validateRequire = [required()];
 
-export const getFieldEdit = (field, search = false, defaultValueByFieldName = {}) => {
+export const getFieldEdit = ({field, search = false, globalFilter = {}, label = null, crud_field}) => {
     if (!field)
         return null;
     const { type, autogenerate } = field
     if (autogenerate && !search) return null
-    
+
     if (type == 'reference') {
-        return <ReferenceInput key={field.name} label={field?.label} source={field.name} reference={field?.reference_entity} 
-            alwaysOn={defaultValueByFieldName[field.name] ? false : true}
+        return <ReferenceInput key={field.name} label={field?.label} source={field.name} reference={field?.reference_entity}
+            alwaysOn={globalFilter[field.name] ? false : true}
+            filter={globalFilter}
+            defaultValue={crud_field?.default}
         >
             <AutocompleteInput sx={{ width: '300px' }} label={field?.label} optionText={field?.reference_name}
-                filterToQuery={(searchText) => ({ [field?.reference_name || 'q']: searchText })} 
+                filterToQuery={(searchText) => ({ [field?.reference_name || 'q']: searchText })}
                 validate={field.required && !search && validateRequire}
-                defaultValue={defaultValueByFieldName[field.name]}
-                />
+                defaultValue={globalFilter[field.name]}
+            />
         </ReferenceInput>
     } else if (field?.type == 'select')
         return <SelectInput key={field.name} label={field?.label} source={field.name} alwaysOn
             choices={field?.select_values}
             optionText="label" optionValue="name"
             validate={field.required && !search && validateRequire}
+            defaultValue={crud_field?.default}
+        />
+    else if (field?.type == 'integer') {
+        return <NumberInput key={field.name} label={field?.label} source={field.name} alwaysOn
+            validate={field.required && !search && validateRequire}
+            defaultValue={crud_field?.default}
         />
+    }
     else if (field?.type == 'image') {
-        return <ImageInput key={field.name} source={field.name} label={field.label} accept="image/*" placeholder={<p>{field.label}</p>} 
+        return <ImageInput key={field.name} source={field.name} label={label || field.label} accept="image/*" placeholder={<p>{field.label}</p>}
             validate={field.required && !search && validateRequire}>
             <SafeImageField source={'src'} title={'title'} />
         </ImageInput>
     }
     else if (field?.type == 'file') {
-        return <FileInput key={field.name} source={field.name} placeholder={<p>{field.label}</p>} 
-        validate={field.required && !search && validateRequire}>
-            <FileField source="src" title="title"/>
+        return <FileInput key={field.name} source={field.name} placeholder={<p>{field.label}</p>}
+            validate={field.required && !search && validateRequire}>
+            <FileField source="src" title="title" />
         </FileInput>
     }
-    else {
-        return <TextInput key={field.name} label={field?.label} source={field.name} alwaysOn 
+    else if (field?.type == 'boolean') {
+        return <BooleanInput key={field.name} label={field?.label} source={field.name} alwaysOn
+            validate={field.required && !search && validateRequire}
+            defaultValue={crud_field?.default}
+        />
+    }
+    else if (field?.type == 'date') {
+        return <DateInput key={field.name} label={field?.label} source={field.name} alwaysOn
+            showTime={field.showtime}
             validate={field.required && !search && validateRequire}
+            defaultValue={crud_field?.default}
+        />
+    }
+    else if (field.type == 'array') {
+        return (<ArrayInput key={field.name} source={field.name} label={field.label} alwaysOn>
+            <SimpleFormIterator>
+                {field.fields && field.fields.map(subField => {
+                    // recursively call getFieldEdit to render the sub fields
+                    return getFieldEdit({
+                        field:subField, 
+                        search, 
+                        globalFilter, 
+                        label:subField.label,
+                        crud_field  //TODO : crud_field should be child of the field
+                    })
+                })}
+            </SimpleFormIterator>
+        </ArrayInput>
+        );
+    } else {
+        return <TextInput key={field.name} label={field?.label} source={field.name} alwaysOn
+            required={!search && field?.type != 'password' && field.required}
+            validate={field.required && field?.type != 'password' && !search && validateRequire}
+            defaultValue={crud_field?.default}
         />
     }
 }

package/src/component/EntityTreeView.jsx

@@ -0,0 +1,156 @@
+import React, { useEffect, useMemo, useCallback, useState, useRef } from 'react';
+import {
+    useRefresh,
+} from 'react-admin';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useAdminContext } from '../AdminContext';
+import { postFetcher, fetcher } from '../common/axios.jsx';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { Box, Paper } from '@mui/material';
+import { act } from '../common/actionParser';
+
+/**
+ * @param {object} component
+ * {
+    "component": "tree",
+    "entity": "region",
+    "key": "id",
+    "parent_key": "parent_id",
+    "label": "name"
+   }
+ * @param {*} component 
+ * @returns 
+ */
+export const EntityTreeView = ({ component, custom, ...props }) => {
+    const navigate = useNavigate()
+    const refresh = useRefresh();
+    const yml = useAdminContext();
+    const [list, setList] = useState([])
+    const fetchedKeysRef = useRef(new Set())
+
+    useEffect(() => {
+        let {entity, key, parent_key, label, sort} = component
+        const custon_filter = custom?.globalFilterDelegate(entity) || {}
+        let url = `/${entity}?${parent_key}=`
+        if(custon_filter) {
+            url += `&${Object.keys(custon_filter).map(key => `${key}=${custon_filter[key]}`).join('&')}`
+        }
+        if(sort) {
+            url += `&_sort=${sort.map(s => `${s.name}`).join(',')}`
+            url += `&_order=${sort.map(s => `${s.desc ? 'DESC' : 'ASC'}`).join(',')}`
+        }
+        
+        fetcher(url).then(res => {
+            
+            if(Array.isArray(res)) {
+                setList(res)
+                res.map(m=>{
+                    fetchChild(m)
+                })
+            }
+        })
+    }, [component, custom])
+
+    const findNode = useCallback((node, targetKeyValue) => {
+        if(node[component.key] == targetKeyValue) {
+            return node
+        }
+        if(Array.isArray(node.list)) {
+            for(let n of node.list) {
+                let r = findNode(n, targetKeyValue)
+                if(r) {
+                    return r
+                }
+            }
+        }
+        return null
+    }, [component])
+
+    
+    const updateNodeChildren = useCallback((nodes, targetKeyValue, children) => {
+        if(!Array.isArray(nodes)) return nodes
+        return nodes.map(node => {
+            if(node[component.key] === targetKeyValue) {
+                return { ...node, list: children }
+            }
+            if(Array.isArray(node.list)) {
+                const updated = updateNodeChildren(node.list, targetKeyValue, children)
+                if(updated !== node.list) {
+                    return { ...node, list: updated }
+                }
+            }
+            return node
+        })
+    }, [component])
+
+    const fetchChild = useCallback((item) => {
+        let {entity, key, parent_key, label, sort} = component
+        const custon_filter = custom?.globalFilterDelegate(entity) || {}
+        let key_value = item[component.key]
+        if(fetchedKeysRef.current.has(key_value)) return
+        let url = `/${entity}?${parent_key}=${key_value}`
+        if(custon_filter) {
+            url += `&${Object.keys(custon_filter).map(key => `${key}=${custon_filter[key]}`).join('&')}`
+        }
+        if(sort) {
+            url += `&_sort=${sort.map(s => `${s.name}`).join(',')}`
+            url += `&_order=${sort.map(s => `${s.desc ? 'DESC' : 'ASC'}`).join(',')}`
+        }
+        fetcher(url).then(res => {
+            let children = Array.isArray(res) ? res : []
+            // remove self references and duplicates
+            children = children.filter(c => c?.[component.key] !== key_value)
+            setList(prev => updateNodeChildren(prev, key_value, children))
+            fetchedKeysRef.current.add(key_value)
+            // recursively prefetch deeper children
+            children.forEach(child => fetchChild(child))
+        })
+    }, [component, custom, updateNodeChildren])
+
+    const itemClick = useCallback((event, nodeId) => {
+        let theNode = findNode({list}, nodeId)
+        let isPeer = !theNode.list || theNode.list.length == 0
+        if(isPeer) {
+            if(component.peer_click?.action) {
+                let args = []
+                component.argment.forEach(arg => {
+                    args.push(theNode[arg.name])
+                })
+                for(let action of component.peer_click.action) {  
+                    act(action, args, {
+                        navigate
+                    })
+                }
+            }
+        }
+        
+    }, [component, custom, list, findNode])
+
+    const renderTree = (item, visited) => {
+        const id = item[component.key]
+        if(visited?.has(id)) return null
+        const nextVisited = visited ? new Set(visited) : new Set()
+        nextVisited.add(id)
+        return (
+            <TreeItem key={id} itemId={`${id}`} label={<span >{item[component.label]}</span>} >
+                {item.list?.map(child => renderTree(child, nextVisited))}
+            </TreeItem>
+        )
+    }
+    
+    return (
+        <Box sx={{ minHeight: 352, minWidth: 250 }}>
+            <SimpleTreeView onItemClick={itemClick}>
+                {list.map(item => {
+                    return (
+                        renderTree(item)
+                    )
+                })}
+            </SimpleTreeView>
+        </Box>
+    )
+};
+
+
+export default EntityTreeView;

package/src/layout/MyMenu.jsx

@@ -21,7 +21,7 @@ const MyMenu = () => {
                 let r = yml.entity[m]
                 r.name = m
                 return r
-            }).filter(f=>f.category == m.name)
+            }).filter(f=>f.category == m.name && f.hidden !== true)
         })
         return list
     }, [yml]);
@@ -31,13 +31,13 @@ const MyMenu = () => {
             let r = yml.entity[m]
             r.name = m
             return r
-        }).filter(f=>!f.category)
+        }).filter(f=>!f.category && f.hidden !== true)
         return list || [];
     }, [yml]);
 
     return (
         <Menu>
-            {/* <Menu.DashboardItem /> */}
+            {yml?.front?.dashboard && <Menu.DashboardItem />}
 
             {noCartegoryList.map(m => <Menu.ResourceItem key={m.name} name={m.name} />)}
             {categoryList.map(c => {

package/src/section/Component.jsx

@@ -0,0 +1,36 @@
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import {
+    useRefresh,
+} from 'react-admin';
+
+import { useNavigate } from 'react-router-dom';
+import { useAdminContext } from '../AdminContext';
+import Chart from "react-apexcharts";
+import { fetcher } from '../common/axios';
+
+export const ComponentLayout = ({ component, custom, ...props }) => {
+    const navigate = useNavigate()
+    const refresh = useRefresh();
+    const yml = useAdminContext();
+    const [data, setData] = useState(null);
+
+    useEffect(() => {
+        fetcher(`/api/chart/${component.id}`).then(res => {
+            setData(res);
+        });
+    }, [component.id]);
+
+    return (
+        <div>
+            {data && <Chart
+                height={component.height || 300}
+                options={data.options}
+                series={data.series}
+                type={component?.type}
+            />}
+        </div>
+    )
+};
+
+
+export default ComponentLayout;

package/src/section/ComponentLayout.jsx

@@ -0,0 +1,44 @@
+import React, { useMemo, useCallback } from 'react';
+import {
+    useRefresh,
+} from 'react-admin';
+
+import { useNavigate } from 'react-router-dom';
+import { useAdminContext } from '../AdminContext';
+import { Box, Grid, Card, CardContent, CardHeader } from '@mui/material';
+import Component from './Component';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+// 컨테이너 근처에서
+
+//Custom Import Start
+
+//Custom Import End
+
+export const ComponentLayout = ({ components, custom, ...props }) => {
+    const navigate = useNavigate()
+    const refresh = useRefresh();
+    const yml = useAdminContext();
+    const theme = useTheme();
+    const mdUp = useMediaQuery(theme.breakpoints.up('md'));
+    return (
+        <Box padding={2} sx={{width:1200}}>
+            <Grid container spacing={2}>
+                {components?.map((component, index) => {
+                    return <Grid item key={index} size={component.size || 4} >
+                        <Card>
+                            <CardHeader title={component.label} />
+                            <CardContent>
+                                <Component component={component} />
+                            </CardContent>
+                        </Card>
+                    </Grid>
+                })}
+            </Grid>
+        </Box>
+    )
+};
+
+
+export default ComponentLayout;

package/src/section/DashboardLayout.jsx

@@ -0,0 +1,50 @@
+import React, { useMemo, useCallback } from 'react';
+import {
+    AutocompleteInput,
+    ChipField,
+    Datagrid,
+    DateField,
+    EditButton,
+    Filter,
+    FunctionField,
+    Show,
+    SimpleShowLayout,
+    NumberField,
+    ReferenceArrayField,
+    ReferenceField,
+    ReferenceInput,
+    SaveButton,
+    SelectInput,
+    SingleFieldList,
+    TextField,
+    TextInput,
+    Toolbar,
+    useRecordContext,
+    useRefresh,
+    useResourceContext,
+    BooleanField,
+} from 'react-admin';
+
+import { useNavigate } from 'react-router-dom';
+import { useAdminContext } from '../AdminContext';
+import { getFieldShow } from '../common/field';
+import ComponentLayout from "./ComponentLayout";
+//Custom Import Start
+
+//Custom Import End
+
+export const DashboardLayout = ({ custom, ...props }) => {
+    const navigate = useNavigate()
+    const refresh = useRefresh();
+    const yml = useAdminContext();
+    
+    // Custom List Code Start
+
+    //Custom List Code End
+    return (
+        <ComponentLayout components={yml?.front?.dashboard} />
+    )
+};
+
+
+export default DashboardLayout;

package/src/section/DynamicCreate.jsx

@@ -1,5 +1,5 @@
 
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useCallback } from 'react';
 import {
     AutocompleteInput,
     Create,
@@ -41,6 +41,21 @@ export const DynamicCreate = ({custom, ...props}) => {
         return yml.entity[resource].fields
     }, [yml, resource])
 
+    const api_generate = useMemo(() => {
+        return yml.entity[resource].api_generate || {}
+    }, [yml, resource])
+
+    const checkApiGenerateContain = useCallback((name) => {
+        if(!api_generate)
+            return true;
+        if(api_generate[name])
+            return false;
+        if(name.includes('.') && api_generate[name.split('.')[0]]) {
+            return false;
+        }
+        return true;
+    }, [api_generate])
+
     const crud = useMemo(() => {
         return yml.entity[resource].crud || {
             show: true,
@@ -64,8 +79,15 @@ export const DynamicCreate = ({custom, ...props}) => {
 
             //Custom Create SimpleForm Property End
             >
-                {fields.filter(field => crud.create == true || crud.create.map(a=>a.name).includes(field.name) ).map(field => {
-                    return getFieldEdit(field, false, custom?.globalFilterDelegate(resource))
+                {fields.filter(field => crud.create == true || crud.create.map(a=>a.name).includes(field.name) )
+                    //exclude field by api_generate
+                    .filter(field => checkApiGenerateContain(field.name))
+                    .map(field => {
+                    return getFieldEdit({field, 
+                        search:false, 
+                        globalFilter:custom?.globalFilterDelegate(resource), 
+                        crud_field:crud.create == true ? null : crud.create.find(a=>a.name == field.name)
+                    })
                 })}
                 
                 {/* Custom Create Start */}

package/src/section/DynamicEdit.jsx

@@ -1,5 +1,5 @@
 
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useCallback } from 'react';
 import {
     AutocompleteInput,
     Edit,
@@ -33,7 +33,7 @@ const EditToolbar = props => (
 );
 
 
-export const DynamicEdit = props => {
+export const DynamicEdit = ({custom, ...props}) => {
     const { permissions } = usePermissions();
     const yml = useAdminContext();
     const resource = useResourceContext(props); 
@@ -42,6 +42,10 @@ export const DynamicEdit = props => {
         return yml.entity[resource].fields
     }, [yml, resource])
 
+    const api_generate = useMemo(() => {
+        return yml.entity[resource].api_generate || {}
+    }, [yml, resource])
+
     const crud = useMemo(() => {
         return yml.entity[resource].crud || {
             show: true,
@@ -54,12 +58,23 @@ export const DynamicEdit = props => {
         }
     }, [yml, resource])
 
+    const checkApiGenerateContain = useCallback((name) => {
+        if(!api_generate)
+            return true;
+        if(api_generate[name])
+            return false;
+        if(name.includes('.') && api_generate[name.split('.')[0]]) {
+            return false;
+        }
+        return true;
+    }, [api_generate])
+    
     //Custom Create Code Start
     
     //Custom Create Code End
     
     return (
-        <Edit title={<DynamicTitle />} {...props} mutationMode='optimistic' redirect="list"
+        <Edit title={<DynamicTitle />} {...props} mutationMode='optimistic' redirect="edit"
         //Custom Create Property Start
        
         //Custom Create Property End
@@ -69,8 +84,16 @@ export const DynamicEdit = props => {
 
             //Custom Create SimpleForm Property End
             >
-                {fields.filter(field =>  crud.edit == true || crud.edit.map(a=>a.name).includes(field.name) ).map(field => {
-                    return getFieldEdit(field)
+                {fields.filter(field => crud.edit == true || crud.edit.map(a=>a.name).includes(field.name))
+                    //exclude field by api_generate
+                    .filter(field => checkApiGenerateContain(field.name))
+                    .map(field => {
+                    return getFieldEdit({
+                        field, 
+                        search:false, 
+                        globalFilter:custom?.globalFilterDelegate(resource) || {},
+                        crud_field:crud.edit == true ? null : crud.edit.find(a=>a.name == field.name)
+                    })
                 })}
 
                 {/* Custom Create Start */}

package/src/section/DynamicLayout.jsx

@@ -0,0 +1,21 @@
+
+import { Box, Stack, Grid } from '@mui/material';
+import EntityTreeView from '../component/EntityTreeView';
+
+const DynamicLayout = ({ entity, custom, children }) => {
+    return (
+        <Stack direction={'row'} spacing={1}>
+            {entity.layout?.left && <Box padding={1}>
+                {entity.layout.left.map((component, index) => {
+                    return <EntityTreeView key={index} component={component} custom={custom} />
+                })}
+            </Box>}
+            <Box width={'100%'}>
+                {children}
+            </Box>
+        </Stack>
+        
+    )
+}
+
+export default DynamicLayout;

package/src/section/DynamicList.jsx

@@ -2,7 +2,7 @@
 import DownloadIcon from '@mui/icons-material/Download';
 import UploadIcon from '@mui/icons-material/Upload';
 import moment from 'moment';
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
     Button,
     CreateButton,
@@ -22,7 +22,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useAdminContext } from '../AdminContext';
 import { postFetcher } from '../common/axios.jsx';
 import { getFieldEdit, getFieldShow } from '../common/field';
-
+import DynamicLayout from './DynamicLayout';
 //Custom Import Start
 
 //Custom Import End
@@ -39,7 +39,7 @@ const EditToolbar = props => (
     </Toolbar>
 );
 
-const DynamicFilter = ({defaultValueByFieldName, ...props}) => {
+const DynamicFilter = ({ custom, ...props }) => {
     const yml = useAdminContext();
     const resource = useResourceContext(props);
     const yml_entity = useMemo(() => {
@@ -51,7 +51,12 @@ const DynamicFilter = ({defaultValueByFieldName, ...props}) => {
             {
                 yml_entity.crud?.search?.map(m => {
                     const field = yml_entity.fields.find(f => f.name == m.name)
-                    return getFieldEdit(field, true, defaultValueByFieldName)
+                    return getFieldEdit({
+                        field, 
+                        search:true, 
+                        globalFilter:custom?.globalFilterDelegate(resource) || {},
+                        crud_field:m
+                    })
                 })
             }
             {
@@ -63,7 +68,7 @@ const DynamicFilter = ({defaultValueByFieldName, ...props}) => {
     )
 };
 
-const ListActions = ({crud, custom, ...props}) => {
+const ListActions = ({ crud, custom, ...props }) => {
     const resource = useResourceContext(props);
     const fileInputRef = React.createRef();
     const notify = useNotify();
@@ -71,17 +76,17 @@ const ListActions = ({crud, custom, ...props}) => {
     const location = useLocation()
 
     const convertFileToBase64 = async file => {
-        
-        if(file){
+
+        if (file) {
             const arrayBuffer = await file.arrayBuffer(); // ArrayBuffer 얻기
             const uint8Array = new Uint8Array(arrayBuffer); // Uint8Array로 변환
-        
+
             // Uint8Array를 문자열로 변환
             const binaryString = uint8Array.reduce((acc, byte) => acc + String.fromCharCode(byte), '');
-        
+
             // Base64 인코딩
             return btoa(binaryString);
-        } else  {
+        } else {
             return null
         }
     };
@@ -90,7 +95,7 @@ const ListActions = ({crud, custom, ...props}) => {
         const file = files[0];
 
         const base64 = await convertFileToBase64(file)
-        await postFetcher(`/excel/${resource}/import`, {}, {base64}).then(res => {
+        await postFetcher(`/excel/${resource}/import`, {}, { base64 }).then(res => {
             if (res && res.r) {
                 notify(
                     res.msg,
@@ -125,13 +130,13 @@ const ListActions = ({crud, custom, ...props}) => {
         //url에서 filter paremeters를 가져와서 export
         const params = new URLSearchParams(location.search); // Query String 파싱
         let filter = params.get("filter")
-        if(filter)
+        if (filter)
             filter = JSON.parse(filter)
         else
             filter = {}
         const globalFilter = custom?.globalFilterDelegate(resource)
         let mergedFilter = {}
-        if(globalFilter) {
+        if (globalFilter) {
             mergedFilter = { ...filter, ...globalFilter }
         }
         postFetcher(`/excel/${resource}/export`, {}, { filter: mergedFilter }).then(r => {
@@ -172,14 +177,14 @@ const ListActions = ({crud, custom, ...props}) => {
                     style={{ display: 'none' }}
                     onChange={e => handleImportFiles(e.target.files)}
                 />
-                <Button onClick={handleImportClick} startIcon={<UploadIcon />} label='Import'/>
+                <Button onClick={handleImportClick} startIcon={<UploadIcon />} label='Import' />
             </>}
-            {crud?.export && <Button onClick={handleExportClick} startIcon={<DownloadIcon />} label='Export'/>}
+            {crud?.export && <Button onClick={handleExportClick} startIcon={<DownloadIcon />} label='Export' />}
         </TopToolbar>
     );
 };
 
-export const DynamicList = ({custom, ...props}) => {
+export const DynamicList = ({ custom, ...props }) => {
     const navigate = useNavigate()
     const refresh = useRefresh();
     const yml = useAdminContext();
@@ -201,37 +206,68 @@ export const DynamicList = ({custom, ...props}) => {
         return yml.entity[resource].fields
     }, [yml, resource])
 
+    const findField = useCallback((name) => {
+        let name_array = name.split('.')[0]
+        let r = fields.find(f => f.name == name_array)
+        if(!r)
+            r = fields.find(f => f.name == name)
+        return r;
+    }, [fields])
+
+    const shouldShowFields = useCallback((name) => {
+
+        if (fields.map(a => a.name).includes(name))
+            return true
+
+        return findField(name) != null
+
+        return false
+
+    }, [fields])
     //Custom List Code Start
 
     //Custom List Code End
     return (
-        <List {...props} filters={<DynamicFilter defaultValueByFieldName={custom?.globalFilterDelegate(resource)}/>} mutationMode='optimistic'
-            exporter={false}
-            sort={{ field: 'id', order: 'DESC' }}
-            perPage={30}
-            actions={<ListActions crud={crud} custom={custom} />}
-            filter={custom?.globalFilterDelegate(resource) || {}}
-        //Custom List Action Start
-
-        //Custom List Action End
-        >
-            {
-                //Custom List Body Start
+        <DynamicLayout entity={yml.entity[resource]} custom={custom}>
+            <List {...props} filters={<DynamicFilter custom={custom} />} mutationMode='optimistic'
+                exporter={false}
+                sort={{ field: 'id', order: 'DESC' }}
+                perPage={30}
+                actions={<ListActions crud={crud} custom={custom} />}
+                filter={custom?.globalFilterDelegate(resource) || {}}
+            //Custom List Action Start
 
-                //Custom List Body End
-            }
-            <Datagrid rowClick="show" bulkActionButtons={true}>
+            //Custom List Action End
+            >
                 {
-                    fields.filter(field => crud.list == true || crud.list.map(a=>a.name).includes(field.name) ).map(m => {
-                        return getFieldShow(m, true, custom?.globalFilterDelegate(resource))
-                    })
+                    //Custom List Body Start
+
+                    //Custom List Body End
                 }
+                <Datagrid rowClick={crud.show ? "show" : false}
+                    bulkActionButtons={crud.delete ? true : false}
+                >
+                    {crud.list == true && fields.map(m => {
+                        return getFieldShow({
+                            field: m,
+                            isList: true
+                        })
+                    })}
+                    {crud.list != true && crud.list.filter(f => f.name).filter(f => shouldShowFields(f.name)).map(crud_field => {
+                        let m = findField(crud_field.name)
+                        return getFieldShow({
+                            crud_field,
+                            field: m,
+                            isList: true
+                        })
+                    })}
                 //Custom List Start
 
-                //Custom List End
-                <EditButton />
-            </Datagrid>
-        </List>
+                    //Custom List End
+                    {crud.edit && <EditButton />}
+                </Datagrid>
+            </List>
+        </DynamicLayout>
     )
 };
 

package/src/section/DynamicShow.jsx

@@ -1,5 +1,4 @@
-
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
     AutocompleteInput,
     ChipField,
@@ -49,17 +48,17 @@ const ShowContent = ({ customFunc }) => {
     )
 };
 
-export const DynamicShow = ({custom, ...props}) => {
+export const DynamicShow = ({ custom, ...props }) => {
     const navigate = useNavigate()
     const refresh = useRefresh();
     const yml = useAdminContext();
-    const resource = useResourceContext(props); 
-    
+    const resource = useResourceContext(props);
+
     const fields = useMemo(() => {
         return yml.entity[resource].fields
     }, [yml, resource])
 
-    const customFunc = useMemo(()=> {
+    const customFunc = useMemo(() => {
         return custom?.entity?.[resource]?.show
     }, [yml, resource])
 
@@ -75,6 +74,22 @@ export const DynamicShow = ({custom, ...props}) => {
         }
     }, [yml, resource])
 
+    const findField = useCallback((name) => {
+        let name_array = name.split('.')[0]
+        let r = fields.find(f => f.name == name_array)
+        return r;
+    }, [fields])
+
+    const shouldShowFields = useCallback((name) => {
+
+        if (fields.map(a => a.name).includes(name))
+            return true
+
+        return findField(name) != null
+
+        return false
+
+    }, [fields])
     // Custom List Code Start
 
     //Custom List Code End
@@ -82,8 +97,18 @@ export const DynamicShow = ({custom, ...props}) => {
         <Show title={<DynamicTitle />} {...props} >
             <SimpleShowLayout>
                 {customFunc && <ShowContent customFunc={customFunc} fields={fields} />}
-                {!customFunc && fields.filter(field => crud.show == true || crud.show.map(a=>a.name).includes(field.name) ).map(m=>{
-                    return getFieldShow(m)
+                {!customFunc && crud.show == true && fields.map(m => {
+                    return getFieldShow({
+                        field: m,
+                    })
+                })}
+
+                {!customFunc && crud.show != true && crud.show.filter(f => f.name).filter(f => shouldShowFields(f.name)).map(crud_field => {
+                    let m = findField(crud_field.name)
+                    return getFieldShow({
+                        crud_field,
+                        field: m,
+                    })
                 })}
             //Custom Show Start