Remove process filters from the sidebar

Created a new buttongroup component to hold them

src/components/Dashboard/Menu/Options.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { HiSquares2X2 } from 'react-icons/hi2'
 import { IoIosSettings } from 'react-icons/io'
-import { generatePath, matchPath, useLocation } from 'react-router-dom'
+import { matchPath, useLocation } from 'react-router-dom'
 import { Routes } from '~src/router/routes'
 import { DashboardMenuItem } from './Item'
 import { OrganizationSwitcher } from './OrganizationSwitcher'
@@ -27,13 +27,8 @@ export const DashboardMenuOptions = () => {
     // },
     {
       label: t('voting_processes'),
+      route: Routes.dashboard.processes,
       icon: HiSquares2X2,
-      children: [
-        { label: t('all'), route: generatePath(Routes.dashboard.processes, { page: 1 }) },
-        { label: t('active'), route: generatePath(Routes.dashboard.processes, { status: 'ready', page: 1 }) },
-        { label: t('finished'), route: generatePath(Routes.dashboard.processes, { status: 'results', page: 1 }) },
-        // { label: t('draft'), route: '#draft' },
-      ],
     },
     // {
     //   label: t('organization.census'),

src/components/Process/ProcessStatusFilters.tsx

@@ -0,0 +1,39 @@
+import { Button, ButtonGroup, ButtonGroupProps } from '@chakra-ui/react'
+import { Trans } from 'react-i18next'
+import { generatePath, NavLink } from 'react-router-dom'
+import { Routes } from '~routes'
+
+type ProcessStatusFilterProps = ButtonGroupProps & {
+  status?: string
+}
+
+const ProcessStatusFilter = ({ status, ...rest }: ProcessStatusFilterProps) => (
+  <ButtonGroup isAttached {...rest}>
+    <Button
+      size='xs'
+      as={NavLink}
+      to={generatePath(Routes.dashboard.processes, { page: 1 })}
+      isActive={status === undefined}
+    >
+      <Trans i18nKey='all'>All</Trans>
+    </Button>
+    <Button
+      size='xs'
+      as={NavLink}
+      to={generatePath(Routes.dashboard.processes, { status: 'ready', page: 1 })}
+      isActive={status === 'ready'}
+    >
+      <Trans i18nKey='active'>Active</Trans>
+    </Button>
+    <Button
+      size='xs'
+      as={NavLink}
+      to={generatePath(Routes.dashboard.processes, { status: 'results', page: 1 })}
+      isActive={status === 'results'}
+    >
+      <Trans i18nKey='finished'>Finished</Trans>
+    </Button>
+  </ButtonGroup>
+)
+
+export default ProcessStatusFilter

src/elements/dashboard/processes/index.tsx

@@ -4,12 +4,13 @@ import { useTranslation } from 'react-i18next'
 import { useLoaderData, useOutletContext, useParams } from 'react-router-dom'
 import { DashboardContents } from '~components/Layout/Dashboard'
 import Votings from '~components/Organization/Dashboard/Votings'
+import ProcessStatusFilter from '~components/Process/ProcessStatusFilters'
 import { DashboardLayoutContext } from '~elements/LayoutDashboard'
 
 const OrganizationVotings = () => {
   const { t } = useTranslation()
   const { setBack, setTitle } = useOutletContext<DashboardLayoutContext>()
-  const data = useLoaderData()
+  const data = useLoaderData() as ElectionListWithPagination
   const { status } = useParams<{ status?: string }>()
 
   // Set page title
@@ -19,7 +20,8 @@ const OrganizationVotings = () => {
   }, [setTitle, setBack])
 
   return (
-    <DashboardContents>
+    <DashboardContents display='flex' flexDirection='column'>
+      <ProcessStatusFilter status={status} alignSelf='end' />
       <Votings data={data as ElectionListWithPagination} status={status} />
     </DashboardContents>
   )

tsconfig.paths.json

@@ -8,6 +8,7 @@
       "~elements/*": ["elements/*"],
       "~i18n": ["i18n/index.ts"],
       "~i18n/*": ["i18n/*"],
+      "~routes": ["router/routes/index.ts"],
       "~theme": ["theme/index.ts"],
       "~theme/*" : ["theme/*"],
       "~utils/*": ["utils/*"],