|  |  | 
 |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
 |  |  | import { TopToolbar } from "react-admin"; | 
 |  |  | import { TopToolbar, useResourceContext, useTranslate } from "react-admin"; | 
 |  |  | import { Stack, Button, Box, Chip } from '@mui/material'; | 
 |  |  | import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'; | 
 |  |  | import { useNavigate } from 'react-router-dom'; | 
 |  |  |  | 
 |  |  | const CustomerTopToolBar = (props) => { | 
 |  |  | const CustomerTopToolBar = ({ backPrevious = false, ...rest }) => { | 
 |  |  |     const navigate = useNavigate(); | 
 |  |  |  | 
 |  |  |     const resource = useResourceContext(); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     return ( | 
 |  |  |         <TopToolbar sx={{ | 
 |  |  |             marginTop: 1, | 
 |  |  | 
 |  |  |             justifyContent: 'flex-start' | 
 |  |  |         }}> | 
 |  |  |             <Button | 
 |  |  |                 onClick={() => navigate(-1)} | 
 |  |  |                 onClick={backPrevious ? () => navigate(-1) : () => navigate('/' + resource)} | 
 |  |  |                 sx={{ | 
 |  |  |                     border: '1px solid #ccc', | 
 |  |  |                     padding: '6px 12px', | 
 |  |  | 
 |  |  |                 }} | 
 |  |  |                 startIcon={<ArrowBackIosNewIcon />} | 
 |  |  |             > | 
 |  |  |                 Back | 
 |  |  |                 {translate('ra.action.back')} | 
 |  |  |             </Button> | 
 |  |  |         </TopToolbar> | 
 |  |  |     ) |