Styled Box - Copy this React, Mui Component to your project

Design an interface consisting of two sections. The left section contains a datagrid that lists districts and the water loss information for each district. The datagrid on the left includes the following columns: District, Water Inflow, Water Consumption, and Loss Rate. The right section contains a datagrid that displays detailed information when the user selects a district from the left datagrid. The datagrid on the right includes the following columns: Content, m3, %, and Actions. Above the right datagrid, there are two buttons: 'Create New Period' and 'Delete Current Period,' followed by a dropdown to select the period and a dropdown to select the year.