SIG Lead Management Screen

package.json

@@ -81,4 +81,4 @@
   "resolutions": {
     "pdfjs-dist": "^4.8.69"
   }
-}
+}

src/common/orgs.ts

@@ -27,4 +27,5 @@ export const CommitteeList = [
   "Corporate Committee",
   "Marketing Committee",
 ] as const;
-export const OrganizationList = ["ACM", ...SIGList, ...CommitteeList];
+
+export const OrganizationList = ["ACM", ...SIGList, ...CommitteeList] as const;

src/common/types/iam.ts

@@ -1,3 +1,4 @@
+import { OrganizationList } from "../orgs.js";
 import { AppRoles } from "../roles.js";
 import { z } from "zod";
 

src/ui/Router.tsx

@@ -17,6 +17,7 @@ import { ScanTicketsPage } from './pages/tickets/ScanTickets.page';
 import { SelectTicketsPage } from './pages/tickets/SelectEventId.page';
 import { ViewTicketsPage } from './pages/tickets/ViewTickets.page';
 import { ManageIamPage } from './pages/iam/ManageIam.page';
+import { ScreenPage } from './pages/screen/Screen.page';
 import { ManageProfilePage } from './pages/profile/ManageProfile.page';
 import { ManageStripeLinksPage } from './pages/stripe/ViewLinks.page';
 
@@ -158,6 +159,10 @@ const authenticatedRouter = createBrowserRouter([
     path: '/tickets/manage/:eventId',
     element: <ViewTicketsPage />,
   },
+  {
+    path: '/iam/leads',
+    element: <ScreenPage />,
+  },
   {
     path: '/stripe',
     element: <ManageStripeLinksPage />,

src/ui/pages/screen/Screen.page.tsx

@@ -0,0 +1,239 @@
+import { Text, Button, Table, Modal, Group, Transition, ButtonGroup } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { notifications } from '@mantine/notifications';
+import { IconPlus, IconTrash } from '@tabler/icons-react';
+// import dayjs from 'dayjs';
+import React, { useEffect, useState } from 'react';
+// import { useNavigate } from 'react-router-dom';
+import { z } from 'zod';
+
+// import { capitalizeFirstLetter } from './ManageEvent.page.js';
+import FullScreenLoader from '@ui/components/AuthContext/LoadingScreen';
+import { AuthGuard } from '@ui/components/AuthGuard';
+import { useApi } from '@ui/util/api';
+import { AppRoles } from '@common/roles.js';
+import { OrganizationList } from '@common/orgs';
+import { User, UserName, UserOrg } from '@common/types/iam';
+
+// const repeatOptions = ['weekly', 'biweekly'] as const;
+
+// export type EventGetResponse = z.infer<typeof getEventSchema>;
+// const getEventsSchema = z.array(getEventSchema);
+// export type EventsGetResponse = z.infer<typeof getEventsSchema>;
+
+export const ScreenPage: React.FC = () => {
+  const [userList, setUserList] = useState<User[]>([]);
+  const api = useApi('core');
+  const [opened, { open, close }] = useDisclosure(false);
+  // const [showPrevious, { toggle: togglePrevious }] = useDisclosure(false); // Changed default to false
+  const [userRemoved, setRemoveUser] = useState<User | null>(null);
+  // const navigate = useNavigate();
+
+  const renderTableRow = (user: User) => {
+    // const shouldShow = event.upcoming || (!event.upcoming && showPrevious);
+
+    return (
+      // <Transition mounted={shouldShow} transition="fade" duration={400} timingFunction="ease">
+      <Transition mounted={true} transition="fade" duration={400} timingFunction="ease">
+        {(styles) => (
+          // <tr style={{ ...styles, display: shouldShow ? 'table-row' : 'none' }}>
+          <tr style={{ ...styles, display: 'table-row' }}>
+            <Table.Td>{user.netid}</Table.Td>
+            <Table.Td>{user.firstName}</Table.Td>
+            <Table.Td>{user.middleName}</Table.Td>
+            <Table.Td>{user.lastName}</Table.Td>
+            <Table.Td>{user.org}</Table.Td>
+            {/* <Table.Td>{dayjs(event.start).format('MMM D YYYY hh:mm')}</Table.Td>
+            <Table.Td>{event.end ? dayjs(event.end).format('MMM D YYYY hh:mm') : 'N/A'}</Table.Td>
+            <Table.Td>{event.location}</Table.Td>
+            <Table.Td>{event.description}</Table.Td>
+            <Table.Td>{event.host}</Table.Td>
+            <Table.Td>{event.featured ? 'Yes' : 'No'}</Table.Td> */}
+            {/* <Table.Td>{capitalizeFirstLetter(event.repeats || 'Never')}</Table.Td> */}
+            <Table.Td>
+              <ButtonGroup>
+                {/* <Button component="a">Edit</Button> */}
+                <Button
+                  color="red"
+                  onClick={() => {
+                    setRemoveUser(user);
+                    open();
+                  }}
+                >
+                  Remove User
+                </Button>
+              </ButtonGroup>
+            </Table.Td>
+          </tr>
+        )}
+      </Transition>
+    );
+  };
+
+  useEffect(() => {
+    const getUsers = async () => {
+      // const response = await api.get('/api/v1/events');
+      // const upcomingEvents = await api.get('/api/v1/events?upcomingOnly=true');
+      // const upcomingEventsSet = new Set(upcomingEvents.data.map((x: EventGetResponse) => x.id));
+      // const events = response.data;
+      // events.sort((a: User, b: User) => {
+      //   return a.start.localeCompare(b.start);
+      // });
+      // const enrichedResponse = response.data.map((item: EventGetResponse) => {
+      //   if (upcomingEventsSet.has(item.id)) {
+      //     return { ...item, upcoming: true };
+      //   }
+      //   return { ...item, upcoming: false };
+      // });
+
+      // get request for user orgs
+      const userOrgsResponse: UserOrg[] = [
+        { netid: 'johnd01', org: 'SIGMusic' },
+        { netid: 'miker44', org: 'SIGPLAN' },
+        { netid: 'chrisb19', org: 'SIGCHI' },
+        { netid: 'ethanw12', org: 'SIGecom' },
+        { netid: 'emilyh54', org: 'SIGRobotics' },
+        { netid: 'juliel08', org: 'SIGGRAPH' },
+        { netid: 'rachelb03', org: 'GameBuilders' },
+        { netid: 'ashleyc28', org: 'SIGNLL' },
+        { netid: 'briand77', org: 'SIGma' },
+        { netid: 'meganf65', org: 'SIGPolicy' },
+        { netid: 'danielh04', org: 'SIGARCH' },
+        { netid: 'lindam29', org: 'SIGMobile' },
+        { netid: 'paulf31', org: 'SIGMusic' },
+        { netid: 'markl13', org: 'SIGCHI' },
+        { netid: 'carolynb59', org: 'ACM' },
+        { netid: 'nataliep71', org: 'SIGPolicy' },
+
+        { netid: 'ethanc12', org: 'Infrastructure Committee' },
+        { netid: 'sarahg23', org: 'SIGQuantum' },
+        { netid: 'annaw02', org: 'SIGMobile' },
+        { netid: 'laurenp87', org: 'SIGPwny' },
+        { netid: 'kevink11', org: 'Infrastructure Committee' },
+        { netid: 'mattt92', org: 'SIGtricity' },
+        { netid: 'stephenj45', org: 'SIGAIDA' },
+        { netid: 'victorc16', org: 'GLUG' },
+        { netid: 'susana80', org: 'SIGPwny' },
+        { netid: 'patrickh37', org: 'SIGQuantum' },
+      ];
+
+      // retrieve from azure active directory (aad)
+      const userNamesResponse: UserName[] = [
+        { netid: 'johnd01', firstName: 'John', lastName: 'Doe' },
+        { netid: 'miker44', firstName: 'Michael', lastName: 'Roberts' },
+        { netid: 'chrisb19', firstName: 'Christopher', lastName: 'Brown' },
+        { netid: 'ethanw12', firstName: 'Ethan', lastName: 'Wong' },
+        { netid: 'emilyh54', firstName: 'Emily', lastName: 'Hernandez' },
+        { netid: 'juliel08', firstName: 'Julie', lastName: 'Lopez' },
+        { netid: 'rachelb03', firstName: 'Rachel', lastName: 'Bell' },
+        { netid: 'ashleyc28', firstName: 'Ashley', lastName: 'Clark' },
+        { netid: 'briand77', firstName: 'Brian', lastName: 'Davis' },
+        { netid: 'meganf65', firstName: 'Megan', lastName: 'Flores' },
+        { netid: 'danielh04', firstName: 'Daniel', lastName: 'Hughes' },
+        { netid: 'lindam29', firstName: 'Linda', lastName: 'Martinez' },
+        { netid: 'paulf31', firstName: 'Paul', lastName: 'Fisher' },
+        { netid: 'markl13', firstName: 'Mark', lastName: 'Lewis' },
+        { netid: 'carolynb59', firstName: 'Carolyn', lastName: 'Barnes' },
+        { netid: 'nataliep71', firstName: 'Natalie', lastName: 'Price' },
+
+        { netid: 'ethanc12', firstName: 'Ethan', middleName: 'Yuting', lastName: 'Chang' },
+        { netid: 'sarahg23', firstName: 'Sarah', middleName: 'Grace', lastName: 'Gonzalez' },
+        { netid: 'annaw02', firstName: 'Anna', middleName: 'Marie', lastName: 'Williams' },
+        { netid: 'laurenp87', firstName: 'Lauren', middleName: 'Patricia', lastName: 'Perez' },
+        { netid: 'kevink11', firstName: 'Kevin', middleName: 'Lee', lastName: 'Kim' },
+        { netid: 'mattt92', firstName: 'Matthew', middleName: 'Thomas', lastName: 'Taylor' },
+        { netid: 'stephenj45', firstName: 'Stephen', middleName: 'James', lastName: 'Johnson' },
+        { netid: 'victorc16', firstName: 'Victor', middleName: 'Charles', lastName: 'Carter' },
+        { netid: 'susana80', firstName: 'Susan', middleName: 'Ann', lastName: 'Anderson' },
+        { netid: 'patrickh37', firstName: 'Patrick', middleName: 'Henry', lastName: 'Hill' },
+      ];
+
+      const mergedResponse: User[] = userOrgsResponse.map((orgObj) => {
+        const nameObj = userNamesResponse.find((name) => name.netid === orgObj.netid);
+        return { ...orgObj, ...nameObj } as User;
+      });
+
+      setUserList(mergedResponse);
+    };
+    getUsers();
+  }, []);
+
+  const removeUser = async (netid: string) => {
+    try {
+      // await api.delete(`/api/v1/events/${eventId}`);
+      setUserList((prevUsers) => prevUsers.filter((u) => u.netid !== netid));
+      notifications.show({
+        title: 'User removed',
+        message: 'The user was successfully removed.',
+      });
+      close();
+    } catch (error) {
+      console.error(error);
+      notifications.show({
+        title: 'Error removing user',
+        message: `${error}`,
+        color: 'red',
+      });
+    }
+  };
+
+  if (userList.length === 0) {
+    return <FullScreenLoader />;
+  }
+
+  return (
+    <AuthGuard resourceDef={{ service: 'core', validRoles: [AppRoles.IAM_ADMIN] }}>
+      {userRemoved && (
+        <Modal
+          opened={opened}
+          onClose={() => {
+            setRemoveUser(null);
+            close();
+          }}
+          title="Confirm action"
+        >
+          <Text>
+            Are you sure you want to remove the user <i>{userRemoved?.netid}</i>?
+          </Text>
+          <hr />
+          <Group>
+            <Button
+              leftSection={<IconTrash />}
+              onClick={() => {
+                removeUser(userRemoved?.netid);
+              }}
+            >
+              Delete
+            </Button>
+          </Group>
+        </Modal>
+      )}
+      {/* <div style={{ display: 'flex', columnGap: '1vw', verticalAlign: 'middle' }}>
+        <Button
+          leftSection={<IconPlus size={14} />}
+          onClick={() => {
+            navigate('/events/add');
+          }}
+        >
+          New Calendar Event
+        </Button>
+        <Button onClick={togglePrevious}>
+          {showPrevious ? 'Hide Previous Events' : 'Show Previous Events'}
+        </Button>
+      </div> */}
+      <Table style={{ tableLayout: 'fixed', width: '100%' }} data-testid="users-table">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>NetID</Table.Th>
+            <Table.Th>First Name</Table.Th>
+            <Table.Th>Middle Name</Table.Th>
+            <Table.Th>Last Name</Table.Th>
+            <Table.Th>Organization</Table.Th>
+            <Table.Th>Actions</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>{userList.map(renderTableRow)}</Table.Tbody>
+      </Table>
+    </AuthGuard>
+  );
+};

yarn.lock

@@ -611,6 +611,14 @@
     "@smithy/types" "^4.1.0"
     tslib "^2.6.2"
 
+"@aws-sdk/[email protected]":
+  version "3.734.0"
+  resolved "https://registry.yarnpkg.com/@aws-sdk/types/-/types-3.734.0.tgz#af5e620b0e761918282aa1c8e53cac6091d169a2"
+  integrity sha512-o11tSPTT70nAkGV1fN9wm/hAIiLPyWX6SuGf+9JyTp7S/rC2cFWhR26MvA69nplcjNaXVzB0f+QFrLXXjOqCrg==
+  dependencies:
+    "@smithy/types" "^4.1.0"
+    tslib "^2.6.2"
+
 "@aws-sdk/util-dynamodb@^3.624.0":
   version "3.741.0"
   resolved "https://registry.yarnpkg.com/@aws-sdk/util-dynamodb/-/util-dynamodb-3.741.0.tgz#4d40b6120617d9cc919eff4261dff0e47757e7bd"
@@ -628,6 +636,16 @@
     "@smithy/util-endpoints" "^3.0.1"
     tslib "^2.6.2"
 
+"@aws-sdk/[email protected]":
+  version "3.734.0"
+  resolved "https://registry.yarnpkg.com/@aws-sdk/util-endpoints/-/util-endpoints-3.734.0.tgz#43bac42a21a45477a386ccf398028e7f793bc217"
+  integrity sha512-w2+/E88NUbqql6uCVAsmMxDQKu7vsKV0KqhlQb0lL+RCq4zy07yXYptVNs13qrnuTfyX7uPXkXrlugvK9R1Ucg==
+  dependencies:
+    "@aws-sdk/types" "3.734.0"
+    "@smithy/types" "^4.1.0"
+    "@smithy/util-endpoints" "^3.0.1"
+    tslib "^2.6.2"
+
 "@aws-sdk/util-locate-window@^3.0.0":
   version "3.723.0"
   resolved "https://registry.yarnpkg.com/@aws-sdk/util-locate-window/-/util-locate-window-3.723.0.tgz#174551bfdd2eb36d3c16e7023fd7e7ee96ad0fa9"
@@ -656,6 +674,17 @@
     "@smithy/types" "^4.1.0"
     tslib "^2.6.2"
 
+"@aws-sdk/[email protected]":
+  version "3.734.0"
+  resolved "https://registry.yarnpkg.com/@aws-sdk/util-user-agent-node/-/util-user-agent-node-3.734.0.tgz#d5c6ee192cea9d53a871178a2669b8b4dea39a68"
+  integrity sha512-c6Iinh+RVQKs6jYUFQ64htOU2HUXFQ3TVx+8Tu3EDF19+9vzWi9UukhIMH9rqyyEXIAkk9XL7avt8y2Uyw2dGA==
+  dependencies:
+    "@aws-sdk/middleware-user-agent" "3.734.0"
+    "@aws-sdk/types" "3.734.0"
+    "@smithy/node-config-provider" "^4.0.1"
+    "@smithy/types" "^4.1.0"
+    tslib "^2.6.2"
+
 "@azure/msal-browser@^3.20.0":
   version "3.28.1"
   resolved "https://registry.yarnpkg.com/@azure/msal-browser/-/msal-browser-3.28.1.tgz#9132fc8807bfcc2b1c3b3c3b9a85d4df41457148"
@@ -7210,6 +7239,15 @@ postcss@^8.4.41, postcss@^8.4.43, postcss@^8.5.1:
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
+postcss@^8.4.43:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.1.tgz#e2272a1f8a807fafa413218245630b5db10a3214"
+  integrity sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==
+  dependencies:
+    nanoid "^3.3.8"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"