fix: provide access to local units table for logged in users

Ensure only super users and country admins of particular country can
validate local units.

Author: samshara

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
 
 import DropdownMenuItem from '#components/DropdownMenuItem';
+import usePermissions from '#hooks/domain/usePermissions';
 import useAlert from '#hooks/useAlert';
 import {
     type GoApiResponse,
@@ -14,6 +15,7 @@ import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 export interface Props {
+    countryId: number;
     localUnitName: string | null | undefined;
     localUnitId: number;
     isValidated: boolean;
@@ -24,15 +26,18 @@ export type LocalUnitValidateResponsePostBody = GoApiResponse<'/api/v2/local-uni
 
 function LocalUnitsTableActions(props: Props) {
     const {
+        countryId,
         localUnitName,
         localUnitId,
         isValidated,
         onActionSuccess,
     } = props;
 
+    const { isCountryAdmin, isSuperUser } = usePermissions();
     const strings = useTranslation(i18n);
     const alert = useAlert();
 
+    const hasValidatePermission = isSuperUser || isCountryAdmin(countryId);
     const {
         pending: validateLocalUnitPending,
         trigger: validateLocalUnit,
@@ -77,7 +82,7 @@ function LocalUnitsTableActions(props: Props) {
                     >
                         {strings.localUnitsView}
                     </DropdownMenuItem>
-                    {!(isValidated) && (
+                    {!(isValidated) && hasValidatePermission && (
                         <DropdownMenuItem
                             persist
                             name={undefined}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx

@@ -122,6 +122,7 @@ function LocalUnitsTable() {
                 '',
                 LocalUnitsTableActions,
                 (_, item) => ({
+                    countryId: item.id,
                     localUnitId: item.id,
                     isValidated: item.validated,
                     localUnitName: item.local_branch_name ?? item.english_branch_name,

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/index.tsx

@@ -12,7 +12,7 @@ import { _cs } from '@togglecorp/fujs';
 
 import Link from '#components/Link';
 import { adminUrl } from '#config';
-import useUserMe from '#hooks/domain/useUserMe';
+import useAuth from '#hooks/domain/useAuth';
 import { type CountryOutletContext } from '#utils/outletContext';
 import { resolveUrl } from '#utils/resolveUrl';
 
@@ -32,11 +32,11 @@ function NationalSocietyLocalUnits(props: Props) {
     } = props;
 
     const [activeTab, setActiveTab] = useState<'map'| 'table'>('map');
+    const { isAuthenticated } = useAuth();
 
     const strings = useTranslation(i18n);
     const { countryId } = useOutletContext<CountryOutletContext>();
 
-    const meResponse = useUserMe();
     return (
         <Tabs
             onChange={setActiveTab}
@@ -49,13 +49,13 @@ function NationalSocietyLocalUnits(props: Props) {
                 childrenContainerClassName={styles.content}
                 withGridViewInFilter
                 withHeaderBorder
-                headerDescription={meResponse?.is_superuser && (
+                headerDescription={isAuthenticated && (
                     <TabList>
                         <Tab name="map">{strings.localUnitsMapView}</Tab>
                         <Tab name="table">{strings.localUnitsListView}</Tab>
                     </TabList>
                 )}
-                actions={meResponse?.is_superuser && (
+                actions={isAuthenticated && (
                     <Link
                         external
                         href={resolveUrl(adminUrl, `local_units/localunit/?country=${countryId}`)}