import { Container, DataGridInner } from '@/components';
import { TransactionProvider } from './hooks/TransactionContext';
import AddDialog from './blocks/AddDialog';
import SearchDialog from './blocks/SearchDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { Breadcrumbs, Link } from '@mui/material';

const Transaction = () => {
  return (
    <TransactionProvider>
      <Container className="mb-7">
        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
        <Breadcrumbs sx={{ mb: 2 }}>
          <Link underline="none" color="inherit" href="/">
            <span className="text-sm hover:underline">Dashboard</span>
          </Link>

          <Link underline="none" color="inherit">
            <span className="text-sm">Master Data</span>
          </Link>

          <Link underline="none" color="inherit">
            <span className="text-sm">Transaction</span>
          </Link>
        </Breadcrumbs>
        <div className="grid gap-5 lg:gap-7.5">
          <DataGridInner />
        </div>
        <AddDialog />
        <EditDialog />
        <DeleteDialog />
        <SearchDialog />
      </Container>
    </TransactionProvider>
  );
};

export default Transaction;