chore: check permission only after org is loaded

.vscode/settings.json

@@ -20,5 +20,6 @@
   "editor.formatOnSave": true,
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
-  }
+  },
+  "vitest.disableWorkspaceWarning": true
 }

apps/dashboard/src/lib/components/CourseContainer/index.svelte

@@ -52,13 +52,14 @@
   $: onCourseIdChange(courseId);
 
   $: {
+    console.log('isOrgAdmin', $isOrgAdmin);
     const user = $group.people.find((person) => person.profile_id === $profile.id);
     if (user) {
       $globalStore.isStudent = user.role_id === 3;
 
       filterPollsByStatus($globalStore.isStudent);
-    } else if (!$isOrgAdmin && $profile.id && $group.people.length) {
+    } else if ($isOrgAdmin === false && $profile.id && $group.people.length) {
-      // Current User doesn't have permission to view
+      // Current User doesn't h ave permission to view
       isPermitted = false;
     }
   }
@@ -76,7 +77,7 @@
 
 <Modal open={!isPermitted} width="w-96" modalHeading={$t('course.not_permitted.header')}>
   <div>
-    <p class="dark:text-white text-md text-center">
+    <p class="text-md text-center dark:text-white">
       {$t('course.not_permitted.body')}
     </p>
 

apps/dashboard/src/lib/components/Org/Settings/TeamMembers.svelte

@@ -134,13 +134,13 @@
   $: fetchTeam($currentOrg.id);
 </script>
 
-<Grid class="border rounded border-gray-200 dark:border-neutral-600 w-full mt-5 relative">
+<Grid class="relative mt-5 w-full rounded border border-gray-200 dark:border-neutral-600">
-  <Row class="py-7 border-bottom-c">
+  <Row class="border-bottom-c py-7">
     <Column sm={2} md={2} lg={4} class="text-lg"
       ><SectionTitle>{$t('course.navItem.people.teams.add')}</SectionTitle></Column
     >
     <Column sm={2} md={6} lg={8}>
-      <p class="text-md text-gray-500 dark:text-white mb-5">
+      <p class="text-md mb-5 text-gray-500 dark:text-white">
         {$t('course.navItem.people.teams.add_team')}
       </p>
 
@@ -174,7 +174,7 @@
     </Column>
   </Row>
 
-  <Row class="py-7 border-bottom-c">
+  <Row class="border-bottom-c py-7">
     <Column sm={2} md={2} lg={4} class="text-lg"
       ><SectionTitle>{$t('course.navItem.people.teams.members')}</SectionTitle></Column
     >
@@ -183,9 +183,9 @@
         <Moon />
       {:else}
         {#each $orgTeam as teamMember}
-          <div class="flex justify-between items-center mb-5">
+          <div class="mb-5 flex items-center justify-between">
             <div class="flex">
-              <p class="text-sm text-gray-500 dark:text-white mr-3">
+              <p class="mr-3 text-sm text-gray-500 dark:text-white">
                 {teamMember.email}
               </p>
               <TextChip value={$t(teamMember.role)} className="text-xs mr-3" size="sm" />

apps/dashboard/src/lib/utils/store/org.ts

@@ -3,11 +3,11 @@ import { browser, dev } from '$app/environment';
 import { derived, writable } from 'svelte/store';
 
 import { PLAN } from 'shared/src/plans/constants';
+import { PUBLIC_IS_SELFHOSTED } from '$env/static/public';
 import { ROLE } from '$lib/utils/constants/roles';
 import { STEPS } from '../constants/quiz';
 import type { UserLessonDataType } from '$lib/utils/types';
 import type { Writable } from 'svelte/store';
-import { PUBLIC_IS_SELFHOSTED } from '$env/static/public';
 
 // Trigger build
 export const defaultCurrentOrgState: CurrentOrg = {
@@ -33,7 +33,11 @@ export const orgs = writable<CurrentOrg[]>([]);
 export const currentOrg: Writable<CurrentOrg> = writable(defaultCurrentOrgState);
 export const orgAudience = writable<OrgAudience[]>([]);
 export const orgTeam = writable<OrgTeamMember[]>([]);
-export const isOrgAdmin = derived(currentOrg, ($currentOrg) => $currentOrg.role_id === ROLE.ADMIN);
+export const isOrgAdmin = derived(currentOrg, ($currentOrg) => {
+  if ($currentOrg.role_id === 0) return null;
+
+  return $currentOrg.role_id === ROLE.ADMIN;
+});
 
 const getActivePlan = (org: CurrentOrg) => {
   return org.organization_plan.find((p) => p.is_active);