Add tabs to dashboard

app/soapbox/components/ui/tabs/tabs.css

@@ -11,8 +11,9 @@
 }
 
 [data-reach-tab] {
-  @apply flex-1 flex justify-center py-4 px-1 text-center font-medium text-sm
-  text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200;
+  @apply flex-1 flex justify-center items-center
+  py-4 px-1 text-center font-medium text-sm text-gray-500
+  dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200;
 }
 
 [data-reach-tab][data-selected] {

app/soapbox/features/admin/index.tsx

@@ -3,7 +3,7 @@ import { defineMessages, useIntl, FormattedMessage, FormattedNumber } from 'reac
 import { Link } from 'react-router-dom';
 
 import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email_list';
-import { Text } from 'soapbox/components/ui';
+import { Text, Tabs } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import sourceCode from 'soapbox/utils/code';
 import { parseVersion } from 'soapbox/utils/features';
@@ -70,9 +70,22 @@ const Dashboard: React.FC = () => {
 
   if (!account) return null;
 
+  const tabs = [{
+    name: 'dashboard',
+    text: 'Dashboard',
+  }, {
+    name: 'reports',
+    text: 'Reports',
+  }, {
+    name: 'approval',
+    text: 'Waitlist',
+  }];
+
   return (
-    <Column icon='tachometer-alt' label={intl.formatMessage(messages.heading)}>
-      <div className='dashcounters'>
+    <Column label={intl.formatMessage(messages.heading)} withHeader={false}>
+      <Tabs items={tabs} activeItem='dashboard' />
+
+      <div className='dashcounters mt-8'>
         {isNumber(mau) && (
           <div className='dashcounter'>
             <Text align='center' size='2xl' weight='medium'>

app/soapbox/pages/admin_page.tsx

@@ -4,7 +4,6 @@ import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import { Layout } from 'soapbox/components/ui';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import {
-  AdminNav,
   LatestAccountsPanel,
 } from 'soapbox/features/ui/util/async-components';
 
@@ -22,10 +21,6 @@ const AdminPage: React.FC = ({ children }) => {
       </Layout.Main>
 
       <Layout.Aside>
-        <BundleContainer fetchComponent={AdminNav}>
-          {Component => <Component />}
-        </BundleContainer>
-
         <BundleContainer fetchComponent={LatestAccountsPanel}>
           {Component => <Component limit={5} />}
         </BundleContainer>