feat(page): render ForwardedDestinations chart on main page

  ## what
  - Render ForwardedDestinations chart

  ## how
  - use Grid to set the width
    - use 50% space when on a medium size screen
    - use 100% space when on a extra-small size screen
  - render ForwardedDestinations component
    - pass prop `isLoading`
    - pass prop `data`

  ## why

  ## where
  - ./src/pages/index.tsx

  ## usage

src/pages/index.tsx

@@ -3,9 +3,10 @@ import Grid from '@mui/material/Unstable_Grid2';
 import type { NextPage } from 'next';
 import Head from 'next/head';
 
+import ForwardedDestinations from '@components/Charts/ForwardDestinations';
 import Summary from '@components/Summary';
-import { useGetSummaryQuery } from '@redux/Summary';
 import { useGetForwardedDestinationsQuery } from '@redux/ForwardedDestinations';
+import { useGetSummaryQuery } from '@redux/Summary';
 
 const Home: NextPage = () => {
   const { data: summaryData, isLoading: summaryIsLoading } = useGetSummaryQuery(undefined, {
@@ -28,6 +29,12 @@ const Home: NextPage = () => {
         <Grid xs={12}>
           <Summary data={summaryData} isLoading={summaryIsLoading} />
         </Grid>
+        <Grid xs={12} md={6}>
+          <ForwardedDestinations
+            data={forwardedDestinationData}
+            isLoading={forwardedDestinationsIsLoading}
+          />
+        </Grid>
       </Grid>
     </Box>
   );