WIP on dashboard cards based on roles

src/components/Tabs/Tabs.tsx

@@ -26,7 +26,6 @@ export const Tabs = ({ tabs, onTabClick }: TabsProps) => {
           id="tabs"
           name="tabs"
           className="block w-full focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md"
-          //   defaultValue={tabs ? tabs.find((tab) => tab.current).name : undefined}
         >
           {tabs.map((tab) => (
             <option key={tab.name}>{tab.name}</option>

src/modules/dashboard/Dashboard.tsx

 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import { useApps } from 'src/services/apps';
-import { DASHBOARD_QUICK_ACCESS } from './consts';
+import { useAuth } from 'src/services/auth';
 import { DashboardCard, DashboardUtility } from './components';
+import { DASHBOARD_QUICK_ACCESS } from './consts';
 
 export const Dashboard: React.FC = () => {
   const host = window.location.hostname;
@@ -10,6 +11,8 @@ export const Dashboard: React.FC = () => {
   splitedDomain.shift();
   const { apps, loadApps } = useApps();
 
+  const { currentUser, isAdmin } = useAuth();
+
   // Tell React to load the apps
   useEffect(() => {
     loadApps();
@@ -29,6 +32,7 @@ export const Dashboard: React.FC = () => {
         <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4 mb-10">
           {apps
             .filter((app) => ['dashboard', 'monitoring'].indexOf(app.slug) === -1)
+            .filter((app) => currentUser?.app_roles.filter((role) => role.name === app.slug) !== [])
             .map((app) => (
               <DashboardCard app={app} key={app.name} />
             ))}