feat(component): add table to display top clients blocked queries

  ## what
  - display client name
  - display number of queries for the client
  - display progress bar using percentage of number of queries for the client against total top clients blocked queries
  - make the client name clickable
  - onClicking client name, it will navigate to queries/clients page
  - display tooltip on the progress bar
    - display number of queries for the client in percentage of the total clients blocked queries

  ## how
  - used Material-ui components
    - Card
    - Table
    - Progress bar
    - Skeleton
    - Typography
    - Tooltip
    - Grid
  - use NextJS `Link` to create links
  - use a separate component to generate a table row
    - calculate percentage. num client queries / total top clients blocked queries
    - use `Intl` JavaScript object to make numbers more readable

  ## why
  - to display top clients blocked queries in a table form

  ## where
  - ./src/components/Tables/TopBlockedClients.tsx

  ## usage

src/components/Tables/Clients/TopBlockedClients.tsx

@@ -0,0 +1,109 @@
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Grid from '@mui/material/Grid';
+import LinearProgress from '@mui/material/LinearProgress';
+import Skeleton from '@mui/material/Skeleton';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+
+import Link from '@components/Link';
+import { ITopPermittedQueries } from '@utils/url/upstream.types';
+
+interface Props {
+  data: ITopPermittedQueries | undefined;
+  isLoading: boolean;
+}
+
+interface ITableRowEntryProps {
+  client: string;
+  ipAddress: string;
+  hits: number;
+  totalPermittedQueries: number;
+}
+
+const TableRowEntry: React.FC<ITableRowEntryProps> = (props: ITableRowEntryProps) => {
+  const { client, ipAddress, hits, totalPermittedQueries } = props;
+  const totalQueriesPretty = new Intl.NumberFormat().format(totalPermittedQueries);
+  const hitsPretty = new Intl.NumberFormat().format(hits);
+  const percentage = (hits / totalPermittedQueries) * 100;
+  const percentageTooltip = `${percentage.toFixed(
+    2,
+  )}% of ${totalQueriesPretty} top blocked queries`;
+  const domainUrl = `/queries/client/${ipAddress}?type=blocked`;
+
+  return (
+    <TableRow>
+      <TableCell>
+        <Link href={domainUrl}>{client}</Link>
+      </TableCell>
+      <TableCell>{hitsPretty}</TableCell>
+      <TableCell>
+        <Tooltip title={percentageTooltip}>
+          <LinearProgress
+            sx={{ height: 10, borderRadius: 0.35 }}
+            variant='determinate'
+            color='error'
+            value={percentage}
+          />
+        </Tooltip>
+      </TableCell>
+    </TableRow>
+  );
+};
+
+const defaultData: ITopPermittedQueries = {};
+
+const TopPermittedQueriesTable: React.FC<Props> = (props: Props) => {
+  const { data = defaultData, isLoading } = props;
+
+  if (isLoading) {
+    return (
+      <Box sx={{ height: 440 }}>
+        <Skeleton variant='rounded' height='inherit' />
+      </Box>
+    );
+  }
+
+  const totalPermittedQueries = Object.values(data).reduce((prev, cur) => prev + cur, 0);
+
+  return (
+    <Grid item sx={{ height: 440 }}>
+      <Card sx={{ height: 'inherit' }}>
+        <CardContent sx={{ height: 'inherit' }}>
+          <Typography variant='h5'>Top Clients (blocked only)</Typography>
+          <TableContainer>
+            <Table size='small'>
+              <TableHead>
+                <TableRow>
+                  <TableCell>Client</TableCell>
+                  <TableCell>Hits</TableCell>
+                  <TableCell>Frequency</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {Object.entries(data).map(([client, hits]) => (
+                  <TableRowEntry
+                    key={`table-row-permitted-${client}`}
+                    client={client.split('|')[0]}
+                    ipAddress={client.split('|')[1]}
+                    hits={hits}
+                    totalPermittedQueries={totalPermittedQueries}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </CardContent>
+      </Card>
+    </Grid>
+  );
+};
+
+export default TopPermittedQueriesTable;