give NGO users the full opportunity view

src/components/Dashboard/Opportunities/Filters/FiltersContent.tsx

@@ -13,7 +13,8 @@ type Props = {
 
 export default function FiltersContent({ setFilter, filter }: Props) {
   const { t } = useTranslation();
-  const { isAuthorized } = useAuth();
+  const { isAuthorized, isAgent } = useAuth();
+  const canSeeFullView = isAuthorized || isAgent;
 
   const { districtFilters, languageFilters, statusFilters, typeFilters, activityFilters, availabilityFilters } =
     createOpportunityFilterItems(filter, setFilter, t);
@@ -24,7 +25,7 @@ export default function FiltersContent({ setFilter, filter }: Props) {
       <AccordionFilter header={t("dashboard.volunteers.filters.district")} items={districtFilters} />
       <AccordionFilter header={t("dashboard.volunteers.filters.languages")} items={languageFilters} />
       <AccordionFilter header={t("dashboard.volunteers.filters.activities")} items={activityFilters} />
-      {isAuthorized && (
+      {canSeeFullView && (
         <AccordionFilter
           header={t("dashboard.opportunities.filters.schedule.header")}
           groupedItems={availabilityFilters}

src/components/Dashboard/Opportunities/Opportunities.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { DashboardLayout } from "@/components/Layout";
 import { apiPathOption, questionMark } from "@/config/constants";
 import { useGetVolunteer, useGetQuery } from "@/hooks";
-import { ApiOptionLists, EntityTableName, UserRole } from "need4deed-sdk";
+import { ApiOptionLists, EntityTableName } from "need4deed-sdk";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import Filters from "../common/CardsFilter/Filters";
 import CardsHeader from "../common/CardsHeader/CardsHeader";
@@ -27,7 +27,6 @@ import { useCurrentUser } from "@/hooks/useCurrentUser";
 
 export function Opportunities() {
   const user = useCurrentUser(true);
-  const isAgent = user?.role === UserRole.AGENT;
   const { t } = useTranslation();
   const [isFiltersOpen, setIsFiltersOpen] = useState(false);
   const [numOfOpps, setNumOfOpps] = useState(0);
@@ -39,16 +38,14 @@ export function Opportunities() {
   const sortOrder = parseSortParam(searchParams.get(SORT_PARAM));
   const tabs = !user
     ? []
-    : isAgent
-      ? [t("dashboard.opportunities.tabs.tab2"), t("dashboard.opportunities.tabs.tab3")]
-      : [
-          t("dashboard.opportunities.tabs.tab1"),
-          t("dashboard.opportunities.tabs.tab2"),
-          t("dashboard.opportunities.tabs.tab3"),
-        ];
+    : [
+        t("dashboard.opportunities.tabs.tab1"),
+        t("dashboard.opportunities.tabs.tab2"),
+        t("dashboard.opportunities.tabs.tab3"),
+      ];
 
   const urlViewParam = searchParams.get("view");
-  const VIEW_MODE_BY_TAB = isAgent ? [ViewMode.CARDS, ViewMode.MAP] : [ViewMode.LIST, ViewMode.CARDS, ViewMode.MAP];
+  const VIEW_MODE_BY_TAB = [ViewMode.LIST, ViewMode.CARDS, ViewMode.MAP];
   const foundIndex = VIEW_MODE_BY_TAB.findIndex((mode) => mode === urlViewParam);
   const selectedTabIndex = foundIndex === -1 ? 0 : foundIndex;
   const viewMode = VIEW_MODE_BY_TAB[selectedTabIndex];

src/components/Dashboard/Opportunities/OpportunityCardList.tsx

@@ -26,10 +26,11 @@ export function OpportunityCardList({
   activitiesList,
   districtsList,
 }: Props) {
-  const { isAuthorized } = useAuth();
+  const { isAuthorized, isAgent } = useAuth();
+  const canSeeFullView = isAuthorized || isAgent;
 
   const items = opportunities.map((opp) =>
-    isAuthorized ? (
+    canSeeFullView ? (
       <OpportunityCard
         key={opp.id}
         opportunity={opp}

src/components/Dashboard/Opportunities/OpportunityTableList.tsx

@@ -29,16 +29,17 @@ export function OpportunityTableList({
   volunteerId,
 }: TableListProps) {
   const { t } = useTranslation();
-  const { isAuthorized } = useAuth();
+  const { isAuthorized, isAgent } = useAuth();
+  const canSeeFullView = isAuthorized || isAgent;
 
   const columns = useMemo(() => createOpportunityTableColumns(t), [t]);
   const readOnlyColumns = useMemo(() => createReadOnlyAgentTableColumns(t), [t]);
   return (
     <EntityTableList
-      columns={isAuthorized ? columns : readOnlyColumns}
+      columns={canSeeFullView ? columns : readOnlyColumns}
       data={opportunities}
       renderRow={(opportunity, isLast) =>
-        isAuthorized ? (
+        canSeeFullView ? (
           <OpportunityTableRow
             key={opportunity.id}
             opportunity={opportunity}

src/hooks/useAuth.ts

@@ -5,11 +5,11 @@ export const useAuth = (compareId?: Id) => {
   const user = useCurrentUser();
   const personId = user?.personId;
   const agentId = user?.agentId;
+  const isAgent = user?.role === UserRole.AGENT;
 
   const isAuthorized = user?.role === UserRole.ADMIN || user?.role === UserRole.COORDINATOR;
   const isOwnProfile =
-    (user?.role === UserRole.VOLUNTEER && personId === compareId) ||
-    (user?.role === UserRole.AGENT && agentId === compareId);
+    (user?.role === UserRole.VOLUNTEER && personId === compareId) || (isAgent && agentId === compareId);
 
-  return { isAuthorized, isOwnProfile };
+  return { isAuthorized, isOwnProfile, isAgent };
 };