#

whycq

2025-02-21 603eb58446847ace3ff0c0350723078f656fbaf1

#

 rsf-admin/src/page/basicInfo/matnrGroup/MatnrGroupEdit.jsx

@@ -1,27 +1,40 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import {
    Edit,
    SimpleForm,
    FormDataConsumer,
    CreateBase,
    useTranslate,
    TextInput,
    NumberInput,
    BooleanInput,
    DateInput,
    SaveButton,
    SelectInput,
    ReferenceInput,
    ReferenceArrayInput,
    AutocompleteInput,
    SaveButton,
    Toolbar,
    required,
    useNotify,
    Form,
    useUpdate,
    useCreate,
    useCreateContext,
    Labeled,
    NumberField,
    required,
    useRecordContext,
    DeleteButton,
} from 'react-admin';
import {
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    Stack,
    Grid,
    Box,
} from '@mui/material';
import DialogCloseButton from "@/page/components/DialogCloseButton";
import TreeSelectInput from "@/page/components/TreeSelectInput";
import { useWatch, useFormContext } from "react-hook-form";
import { Stack, Grid, Box, Typography } from '@mui/material';
import * as Common from '@/utils/common';
import { EDIT_MODE, REFERENCE_INPUT_PAGESIZE } from '@/config/setting';
import EditBaseAside from "@/page/components/EditBaseAside";
@@ -29,75 +42,139 @@
import MemoInput from "@/page/components/MemoInput";
import StatusSelectInput from "@/page/components/StatusSelectInput";

const FormToolbar = () => {
    const { getValues } = useFormContext();

const EditContent = ({ editRecord }) => {
    const { resource } = useCreateContext();
    return (
        <Toolbar sx={{ justifyContent: 'space-between' }}>
            <SaveButton />
            <DeleteButton mutationMode="optimistic" />
        </Toolbar>
        <Grid container rowSpacing={2} columnSpacing={2}>
            <Grid item xs={6} display="flex" gap={1}>
                <TreeSelectInput
                    label="table.field.matnrGroup.parentId"
                    value={editRecord?.parentId}
                    isTranslate
                    resource={resource}
                />
            </Grid>
            <Grid item xs={6} display="flex" gap={1}>
                <TextInput
                    label="table.field.matnrGroup.name"
                    source="name"
                    parse={v => v}
                    validate={required()}
                />
            </Grid>
            <Grid item xs={6} display="flex" gap={1}>
                <TextInput
                    label="table.field.matnrGroup.code"
                    source="code"
                    parse={v => v}
                />
            </Grid>
        </Grid>
    )
}

const MatnrGroupEdit = () => {
const MatnrGroupEdit = (props) => {
    const { editRecord, open, setOpen, callback, resource } = props;
    
    const translate = useTranslate();
    const notify = useNotify();

    const [update] = useUpdate();
    const [create] = useCreate();

    const handleClose = (event, reason) => {
        if (reason !== "backdropClick") {
            setOpen(false);
        }
    };

    const handleSuccess = async (data) => {
        setOpen(false);
        callback();
        notify('common.response.success', { type: 'info' });
    };

    const handleError = async (data) => {
        notify('common.response.fail', { type: 'error' });
    };

    const onSubmit = (data) => {
        const _params = { ...data };
        if (editRecord) {
            if (_params.parentId === editRecord.id) {
                notify('common.response.dataError', { type: 'error' });
                return;
            }
            update(
                resource,
                {
                    id: editRecord.id,
                    data: _params,
                },
                {
                    onSuccess: () => {
                        handleSuccess();
                    },
                    onError: (error) => {
                        handleError();
                    },
                }
            );
        } else {
            create(
                resource,
                { data: _params },
                {
                    onSuccess: () => {
                        handleSuccess();
                    },
                    onError: (error) => {
                        handleError();
                    },
                }
            );
        }
    };

    return (
        <Edit
            redirect="list"
            mutationMode={EDIT_MODE}
            actions={<CustomerTopToolBar />}
            aside={<EditBaseAside />}
        >
            <SimpleForm
                shouldUnregister
                warnWhenUnsavedChanges
                toolbar={<FormToolbar />}
                mode="onTouched"
                defaultValues={{}}
            // validate={(values) => { }}
    <>
        <CreateBase>
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="form-dialog-title"
                fullWidth
                disableRestoreFocus
                maxWidth="md"   // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
            >
                <Grid container width={{ xs: '100%', xl: '80%' }} rowSpacing={3} columnSpacing={3}>
                    <Grid item xs={12} md={8}>
                        <Typography variant="h6" gutterBottom>
                            {translate('common.edit.title.main')}
                        </Typography>
                        <Stack direction='row' gap={2}>
                            <TextInput
                                label="table.field.matnrGroup.name"
                                source="name"
                                parse={v => v}
                                validate={required()}
                            />
                        </Stack>
                        <Stack direction='row' gap={2}>
                            <TextInput
                                label="table.field.matnrGroup.code"
                                source="code"
                                parse={v => v}
                                validate={required()}
                            />
                        </Stack>
                        <Stack direction='row' gap={2}>
                            <NumberInput
                                label="table.field.matnrGroup.parentId"
                                source="parentId"
                            />
                        </Stack>

                    </Grid>
                    <Grid item xs={12} md={4}>
                        <Typography variant="h6" gutterBottom>
                            {translate('common.edit.title.common')}
                        </Typography>
                        <StatusSelectInput />
                        <Box mt="2em" />
                        <MemoInput />
                    </Grid>
                </Grid>
            </SimpleForm>
        </Edit >
                <Form record={editRecord} onSubmit={onSubmit}>
                    <DialogTitle id="form-dialog-title" sx={{
                        position: 'sticky',
                        top: 0,
                        backgroundColor: 'background.paper',
                        zIndex: 1000
                    }}
                    >
                        {editRecord ? translate('update.title') : translate('create.title')}
                        <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}>
                            <DialogCloseButton onClose={handleClose} />
                        </Box>
                    </DialogTitle>
                    <DialogContent sx={{ mt: 2 }}>
                        <EditContent
                            editRecord={editRecord}
                        />
                    </DialogContent>
                    <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
                        <Toolbar sx={{ width: '100%', justifyContent: 'space-between' }}  >
                            <SaveButton />
                        </Toolbar>
                    </DialogActions>
                </Form>
            </Dialog>
        </CreateBase>
    </>
    )
}


 rsf-admin/src/page/basicInfo/matnrGroup/MatnrGroupList copy.jsx

New file
@@ -0,0 +1,156 @@
import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
import { useNavigate } from 'react-router-dom';
import {
    List,
    DatagridConfigurable,
    SearchInput,
    TopToolbar,
    SelectColumnsButton,
    EditButton,
    FilterButton,
    CreateButton,
    ExportButton,
    BulkDeleteButton,
    WrapperField,
    useRecordContext,
    useTranslate,
    useNotify,
    useListContext,
    FunctionField,
    TextField,
    NumberField,
    DateField,
    BooleanField,
    ReferenceField,
    TextInput,
    DateTimeInput,
    DateInput,
    SelectInput,
    NumberInput,
    ReferenceInput,
    ReferenceArrayInput,
    AutocompleteInput,
    DeleteButton,
} from 'react-admin';
import { Box, Typography, Card, Stack } from '@mui/material';
import { styled } from '@mui/material/styles';
import MatnrGroupCreate from "./MatnrGroupCreate";
import MatnrGroupPanel from "./MatnrGroupPanel";
import EmptyData from "@/page/components/EmptyData";
import MyCreateButton from "@/page/components/MyCreateButton";
import MyExportButton from '@/page/components/MyExportButton';
import PageDrawer from "@/page/components/PageDrawer";
import MyField from "@/page/components/MyField";
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting';
import * as Common from '@/utils/common';

const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
        height: '.9em'
    },
    '& .RaDatagrid-row': {
        cursor: 'auto'
    },
    '& .column-name': {
    },
    '& .opt': {
        width: 200
    },
}));

const filters = [
    <SearchInput source="condition" alwaysOn />,
    <DateInput label='common.time.after' source="timeStart" alwaysOn />,
    <DateInput label='common.time.before' source="timeEnd" alwaysOn />,

    <TextInput source="name" label="table.field.matnrGroup.name" />,
    <TextInput source="code" label="table.field.matnrGroup.code" />,
    <NumberInput source="parentId" label="table.field.matnrGroup.parentId" />,

    <TextInput label="common.field.memo" source="memo" />,
    <SelectInput
        label="common.field.status"
        source="status"
        choices={[
            { id: '1', name: 'common.enums.statusTrue' },
            { id: '0', name: 'common.enums.statusFalse' },
        ]}
        resettable
    />,
]

const MatnrGroupList = () => {
    const translate = useTranslate();

    const [createDialog, setCreateDialog] = useState(false);
    const [drawerVal, setDrawerVal] = useState(false);

    return (
        <Box display="flex">
            <List
                sx={{
                    flexGrow: 1,
                    transition: (theme) =>
                        theme.transitions.create(['all'], {
                            duration: theme.transitions.duration.enteringScreen,
                        }),
                    marginRight: !!drawerVal ? `${PAGE_DRAWER_WIDTH}px` : 0,
                }}
                title={"menu.matnrGroup"}
                empty={<EmptyData onClick={() => { setCreateDialog(true) }} />}
                filters={filters}
                sort={{ field: "create_time", order: "desc" }}
                actions={(
                    <TopToolbar>
                        <FilterButton />
                        <MyCreateButton onClick={() => { setCreateDialog(true) }} />
                        <SelectColumnsButton preferenceKey='matnrGroup' />
                        <MyExportButton />
                    </TopToolbar>
                )}
                perPage={DEFAULT_PAGE_SIZE}
            >
                <StyledDatagrid
                    preferenceKey='matnrGroup'
                    bulkActionButtons={() => <BulkDeleteButton mutationMode={OPERATE_MODE} />}
                    rowClick={(id, resource, record) => false}
                    expand={() => <MatnrGroupPanel />}
                    expandSingle={true}
                    omit={['id', 'createTime', 'createBy', 'memo']}
                >
                    <NumberField source="id" />
                    <TextField source="name" label="table.field.matnrGroup.name" />
                    <TextField source="code" label="table.field.matnrGroup.code" />
                    <NumberField source="parentId" label="table.field.matnrGroup.parentId" />

                    <ReferenceField source="updateBy" label="common.field.updateBy" reference="user" link={false} sortable={false}>
                        <TextField source="nickname" />
                    </ReferenceField>
                    <DateField source="updateTime" label="common.field.updateTime" showTime />
                    <ReferenceField source="createBy" label="common.field.createBy" reference="user" link={false} sortable={false}>
                        <TextField source="nickname" />
                    </ReferenceField>
                    <DateField source="createTime" label="common.field.createTime" showTime />
                    <BooleanField source="statusBool" label="common.field.status" sortable={false} />
                    <TextField source="memo" label="common.field.memo" sortable={false} />
                    <WrapperField cellClassName="opt" label="common.field.opt">
                        <EditButton sx={{ padding: '1px', fontSize: '.75rem' }} />
                        <DeleteButton sx={{ padding: '1px', fontSize: '.75rem' }} mutationMode={OPERATE_MODE} />
                    </WrapperField>
                </StyledDatagrid>
            </List>
            <MatnrGroupCreate
                open={createDialog}
                setOpen={setCreateDialog}
            />
            <PageDrawer
                title='MatnrGroup Detail'
                drawerVal={drawerVal}
                setDrawerVal={setDrawerVal}
            >
            </PageDrawer>
        </Box>
    )
}

export default MatnrGroupList;

 rsf-admin/src/page/basicInfo/matnrGroup/MatnrGroupList.jsx

@@ -1,156 +1,339 @@
import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
import { useNavigate } from 'react-router-dom';
import React from 'react';
import {
    List,
    DatagridConfigurable,
    SearchInput,
    TopToolbar,
    SelectColumnsButton,
    EditButton,
    FilterButton,
    CreateButton,
    ExportButton,
    BulkDeleteButton,
    WrapperField,
    useRecordContext,
    Title,
    useTranslate,
    useNotify,
    useListContext,
    FunctionField,
    TextField,
    NumberField,
    DateField,
    BooleanField,
    ReferenceField,
    TextInput,
    DateTimeInput,
    DateInput,
    SelectInput,
    NumberInput,
    ReferenceInput,
    ReferenceArrayInput,
    AutocompleteInput,
    DeleteButton,
    useRedirect,
    useRefresh,
    useDelete,
} from 'react-admin';
import { Box, Typography, Card, Stack } from '@mui/material';
import { styled } from '@mui/material/styles';
import MatnrGroupCreate from "./MatnrGroupCreate";
import MatnrGroupPanel from "./MatnrGroupPanel";
import EmptyData from "@/page/components/EmptyData";
import MyCreateButton from "@/page/components/MyCreateButton";
import MyExportButton from '@/page/components/MyExportButton';
import PageDrawer from "@/page/components/PageDrawer";
import MyField from "@/page/components/MyField";
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting';
import * as Common from '@/utils/common';
import {
    Box,
    Collapse,
    IconButton,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Paper,
    Card,
    Typography,
    TextField,
    Tooltip,
    Button,
    Chip,
    LinearProgress,
} from '@mui/material';
import { Add, Edit, Delete } from '@mui/icons-material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import RefreshIcon from '@mui/icons-material/Refresh';
import request from '@/utils/request';
import MatnrGroupEdit from "./MatnrGroupEdit";
import * as Icons from '@mui/icons-material';

const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
        height: '.9em'
const RESOURCE = 'matnrGroup';
const TITLE = 'menu.matnrGroup';

const columns = [
    {
        id: 'name',
        label: 'table.field.matnrGroup.name',
        minWidth: 200,
    },
    '& .RaDatagrid-row': {
        cursor: 'auto'
    {
        id: 'code',
        label: 'table.field.matnrGroup.code',
        minWidth: 80,
    },
    '& .column-name': {
    },
    '& .opt': {
        width: 200
    },
    {
        id: 'parentId',
        label: 'table.field.matnrGroup.parentId',
        minWidth: 100,
    }
];

const getIconComponent = (iconStr) => {
    return Icons[iconStr] || null;
};

const StyledTableRow = styled(TableRow)(({ theme }) => ({
    '& .MuiButtonBase-root': {
        padding: '0px 8px'
    }
}));

const filters = [
    <SearchInput source="condition" alwaysOn />,
    <DateInput label='common.time.after' source="timeStart" alwaysOn />,
    <DateInput label='common.time.before' source="timeEnd" alwaysOn />,
const StyledTableCell = styled(TableCell)(({ theme }) => ({
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    maxWidth: 600,
}));

    <TextInput source="name" label="table.field.matnrGroup.name" />,
    <TextInput source="code" label="table.field.matnrGroup.code" />,
    <NumberInput source="parentId" label="table.field.matnrGroup.parentId" />,
const TreeTableRow = (props) => {
    const { row, depth = 0, openNodes, setOpenNodes, onEdit, onDelete } = props;
    const translate = useTranslate();

    <TextInput label="common.field.memo" source="memo" />,
    <SelectInput
        label="common.field.status"
        source="status"
        choices={[
            { id: '1', name: 'common.enums.statusTrue' },
            { id: '0', name: 'common.enums.statusFalse' },
        ]}
        resettable
    />,
]
    const toggleNode = (id) => {
        setOpenNodes(prevState => ({ ...prevState, [id]: !prevState[id] }));
    };

    const isOpen = openNodes[row.id] || false;

    return (
        <React.Fragment>
            <StyledTableRow hover tabIndex={-1} key={row.id}>
                <StyledTableCell sx={{ padding: 0 }}>
                    {row.children && (
                        <IconButton
                            aria-label="expand row"
                            size="small"
                            onClick={() => toggleNode(row.id)}
                        >
                            {isOpen ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
                        </IconButton>
                    )}
                </StyledTableCell>
                {columns.map((column, idx) => {
                    if (column.id !== 'actions') {
                        let value = row[column.id];
                        if (column.id === 'name' && row['type'] === 0) {
                            value = translate(value);
                        }
                        return (
                            <StyledTableCell
                                key={column.id}
                                align={column.align || 'left'}
                                style={{
                                    paddingLeft: idx === 0 && (depth * 16 + 16),
                                    opacity: column.id === 'icon' && .6
                                }}
                                onClick={() => toggleNode(row.id)}
                            >
                                {column.format ? column.format(value) : value}
                            </StyledTableCell>
                        )
                    }
                })}
                <StyledTableCell>
                    <Tooltip title="Edit">
                        <IconButton onClick={() => onEdit(row)}>
                            <Edit />
                        </IconButton>
                    </Tooltip>
                    <Tooltip title="Delete">
                        <IconButton onClick={() => onDelete(row)}>
                            <Delete />
                        </IconButton>
                    </Tooltip>
                </StyledTableCell>
            </StyledTableRow>
            {row.children && isOpen && (
                row.children.map((child) => (
                    <TreeTableRow
                        key={child.id}
                        row={child}
                        depth={depth + 1}
                        onEdit={onEdit}
                        onDelete={onDelete}
                        openNodes={openNodes}
                        setOpenNodes={setOpenNodes}
                    />
                ))
            )}
        </React.Fragment>
    );
};

const MatnrGroupList = () => {
    const translate = useTranslate();
    const notify = useNotify();
    const redirect = useRedirect();
    const refresh = useRefresh();
    const [deleteOne] = useDelete();

    const [createDialog, setCreateDialog] = useState(false);
    const [drawerVal, setDrawerVal] = useState(false);
    const [treeData, setTreeData] = React.useState(null);
    const [filter, setFilter] = React.useState("");
    const [createDialog, setCreateDialog] = React.useState(false);
    const [editRecord, setEditRecord] = React.useState(null);
    const [openNodes, setOpenNodes] = React.useState({});
    const [expandAll, setExpandAll] = React.useState(false);

    const http = async () => {
        const res = await request.post(RESOURCE + '/tree', {
            condition: filter
        });
        if (res?.data?.code === 200) {
            setTreeData(res.data.data);
        } else {
            notify(res.data.msg);
        }
    }

    React.useEffect(() => {
        http();
    }, [filter]);

    const handleRefresh = () => {
        http();
    };

    const handleAdd = () => {
        setEditRecord(null);
        setCreateDialog(true);
    };

    const handleEdit = (node) => {
        setEditRecord(node);
        setCreateDialog(true);
    };

    const handleDelete = (node) => {
        if (window.confirm(translate('ra.message.delete_content'))) {
            deleteOne(
                RESOURCE,
                { id: node.id },
                {
                    onSuccess: () => {
                        handleRefresh();
                        notify('Department deleted successfully', { type: 'info', messageArgs: { _: 'Department deleted successfully' } });
                    },
                    onError: (error) => {
                        notify(`Error: ${error.message}`, { type: 'warning', messageArgs: { _: `Error: ${error.message}` } });
                    },
                }
            );
        }
    };

    const toggleExpandAll = () => {
        setExpandAll(prevExpandAll => {
            const newExpandAll = !prevExpandAll;
            const newOpenNodes = {};
            const updateOpenNodes = (nodes) => {
                nodes.forEach(node => {
                    newOpenNodes[node.id] = newExpandAll;
                    if (node.children) {
                        updateOpenNodes(node.children);
                    }
                });
            };
            updateOpenNodes(treeData);
            setOpenNodes(newOpenNodes);
            return newExpandAll;
        });
    };

    return (
        <Box display="flex">
            <List
                sx={{
                    flexGrow: 1,
                    transition: (theme) =>
                        theme.transitions.create(['all'], {
                            duration: theme.transitions.duration.enteringScreen,
                        }),
                    marginRight: !!drawerVal ? `${PAGE_DRAWER_WIDTH}px` : 0,
                }}
                title={"menu.matnrGroup"}
                empty={<EmptyData onClick={() => { setCreateDialog(true) }} />}
                filters={filters}
                sort={{ field: "create_time", order: "desc" }}
                actions={(
                    <TopToolbar>
                        <FilterButton />
                        <MyCreateButton onClick={() => { setCreateDialog(true) }} />
                        <SelectColumnsButton preferenceKey='matnrGroup' />
                        <MyExportButton />
                    </TopToolbar>
                )}
                perPage={DEFAULT_PAGE_SIZE}
            >
                <StyledDatagrid
                    preferenceKey='matnrGroup'
                    bulkActionButtons={() => <BulkDeleteButton mutationMode={OPERATE_MODE} />}
                    rowClick={(id, resource, record) => false}
                    expand={() => <MatnrGroupPanel />}
                    expandSingle={true}
                    omit={['id', 'createTime', 'createBy', 'memo']}
                >
                    <NumberField source="id" />
                    <TextField source="name" label="table.field.matnrGroup.name" />
                    <TextField source="code" label="table.field.matnrGroup.code" />
                    <NumberField source="parentId" label="table.field.matnrGroup.parentId" />

                    <ReferenceField source="updateBy" label="common.field.updateBy" reference="user" link={false} sortable={false}>
                        <TextField source="nickname" />
                    </ReferenceField>
                    <DateField source="updateTime" label="common.field.updateTime" showTime />
                    <ReferenceField source="createBy" label="common.field.createBy" reference="user" link={false} sortable={false}>
                        <TextField source="nickname" />
                    </ReferenceField>
                    <DateField source="createTime" label="common.field.createTime" showTime />
                    <BooleanField source="statusBool" label="common.field.status" sortable={false} />
                    <TextField source="memo" label="common.field.memo" sortable={false} />
                    <WrapperField cellClassName="opt" label="common.field.opt">
                        <EditButton sx={{ padding: '1px', fontSize: '.75rem' }} />
                        <DeleteButton sx={{ padding: '1px', fontSize: '.75rem' }} mutationMode={OPERATE_MODE} />
                    </WrapperField>
                </StyledDatagrid>
            </List>
            <MatnrGroupCreate
        <div>
            <MatnrGroupEdit
                editRecord={editRecord}
                open={createDialog}
                setOpen={setCreateDialog}
                callback={() => {
                    handleRefresh();
                }}
                resource={RESOURCE}
            />
            <PageDrawer
                title='MatnrGroup Detail'
                drawerVal={drawerVal}
                setDrawerVal={setDrawerVal}
            >
            </PageDrawer>
        </Box>
    )
            <Title title={TITLE} />
            <Box sx={{ mt: 2, mr: 3, mb: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <Box width={300} >
                    <Button
                        variant="outlined"
                        color="primary"
                        startIcon={expandAll ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
                        onClick={toggleExpandAll}
                        sx={{ ml: 1 }}
                    >
                        {expandAll ? translate('common.action.collapseAll') : translate('common.action.expandAll')}
                    </Button>
                    {/* <TextField
                        label="Search"
                        value={filter}
                        onChange={({ target }) => {
                            setFilter(target.value)
                        }}
                        variant="filled"
                        size="small"
                        margin="dense"
                        fullWidth
                    /> */}
                </Box>
                <Box>
                    <Button
                        variant="outlined"
                        color="primary"
                        startIcon={<RefreshIcon />}
                        onClick={handleRefresh}
                        sx={{ ml: 1 }}
                    >
                        {translate('ra.action.refresh')}
                    </Button>
                    <Button
                        variant="outlined"
                        color="primary"
                        startIcon={<Add />}
                        onClick={handleAdd}
                        sx={{ ml: 1 }}
                    >
                        {translate('ra.action.add')}
                    </Button>
                </Box>
            </Box>
            <Card sx={{
                position: 'relative',
            }}>
                {!treeData && (
                    <LinearProgress
                        sx={{
                            height: "3px",
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            right: 0,
                        }}
                    />
                )}
                <TableContainer component={Paper}>
                    <Table size="small">
                        <TableHead>
                            <TableRow>
                                <StyledTableCell sx={{ padding: 0, width: 60 }} />
                                {columns.map((column, idx) => (
                                    <StyledTableCell
                                        key={idx}
                                        align={column.align || 'left'}
                                        style={{
                                            minWidth: column.minWidth
                                        }}
                                    >
                                        {translate(column.label)}
                                    </StyledTableCell>
                                ))}
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {treeData && treeData.length > 0 && (
                                treeData.map((row) => (
                                    <TreeTableRow
                                        key={row.id}
                                        row={row}
                                        onEdit={handleEdit}
                                        onDelete={handleDelete}
                                        openNodes={openNodes}
                                        setOpenNodes={setOpenNodes}
                                    />
                                ))
                            )}
                        </TableBody>
                    </Table>
                </TableContainer>
            </Card>
        </div>
    );
}

export default MatnrGroupList;