feat: added view Place and PlaceList page

src/pages/email/resources/management/list-rooms/index.js

@@ -2,14 +2,25 @@ import { Layout as DashboardLayout } from "/src/layouts/index.js";
 import { CippTablePage } from "/src/components/CippComponents/CippTablePage.jsx";
 import { Button } from "@mui/material";
 import Link from "next/link";
+import { EyeIcon } from "@heroicons/react/24/outline";
 
 const Page = () => {
   const pageTitle = "Rooms";
 
+  const actions = [
+    {
+      label: "View Room",
+      link: `/email/resources/management/list-rooms/place/view?PlaceAddress=[emailAddress]`,
+      color: "info",
+      icon: <EyeIcon />,
+    },
+  ];
+
   return (
     <CippTablePage
       title={pageTitle}
       apiUrl="/api/ListRooms"
+      actions={actions}
       simpleColumns={["displayName", "building", "floorNumber", "capacity", "bookingType"]}
       cardButton={
         <Button component={Link} href="/email/resources/management/list-rooms/add">

src/pages/email/resources/management/list-rooms/place/tabOptions.json

@@ -0,0 +1,6 @@
+[
+  {
+    "label": "View Room",
+    "path": "/email/resources/management/list-rooms/place/view"
+  }
+]

src/pages/email/resources/management/list-rooms/place/view.jsx

@@ -0,0 +1,106 @@
+import { Layout as DashboardLayout } from "/src/layouts/index.js";
+import { useRouter } from "next/router";
+import { useSettings } from "/src/hooks/use-settings";
+import { ApiGetCall } from "/src/api/ApiCall";
+import CippFormSkeleton from "/src/components/CippFormPages/CippFormSkeleton";
+import { Mail } from "@mui/icons-material";
+import { HeaderedTabbedLayout } from "/src/layouts/HeaderedTabbedLayout";
+import tabOptions from "./tabOptions";
+import { CippCopyToClipBoard } from "/src/components/CippComponents/CippCopyToClipboard";
+import { Box } from "@mui/system";
+import Grid from "@mui/material/Grid2";
+import { CippPropertyListCard } from "/src/components/CippCards/CippPropertyListCard";
+import { useEffect, useState } from "react";
+
+const Page = () => {
+  const userSettingsDefaults = useSettings();
+  const router = useRouter();
+  const { PlaceAddress } = router.query;
+  const [waiting, setWaiting] = useState(false);
+  useEffect(() => {
+    if (PlaceAddress) {
+      setWaiting(true);
+    }
+  }, [PlaceAddress]);
+
+  const placeRequest = ApiGetCall({
+    url: `/api/ListRooms?PlaceID=${PlaceAddress}&tenantFilter=${userSettingsDefaults.currentTenant}`,
+    queryKey: `PlaceList-${PlaceAddress}`,
+    waiting: waiting,
+  });
+
+  const title = placeRequest.isSuccess ? <>{placeRequest.data?.[0]?.displayName}</> : "Loading...";
+
+  const subtitle = placeRequest.isSuccess
+    ? [
+        {
+          icon: <Mail />,
+          text: <CippCopyToClipBoard type="chip" text={placeRequest.data?.[0]?.emailAddress} />,
+        },
+      ]
+    : [];
+
+  const data = placeRequest.data?.[0];
+
+  return (
+    <HeaderedTabbedLayout
+      tabOptions={tabOptions}
+      title={title}
+      subtitle={subtitle}
+      isFetching={placeRequest.isLoading}
+    >
+      {placeRequest.isLoading && <CippFormSkeleton layout={[2, 1, 2, 2]} />}
+      {placeRequest.isSuccess && (
+        <Box
+          sx={{
+            flexGrow: 1,
+            py: 4,
+          }}
+        >
+          <Grid container spacing={2}>
+            <Grid item size={4}>
+              <CippPropertyListCard
+                title="Location"
+                propertyItems={[
+                  { label: "Country", value: data?.address?.countryOrRegion ?? "N/A" },
+                  { label: "State", value: data?.address?.state ?? "N/A" },
+                  { label: "Postal Code", value: data?.address?.postalCode ?? "N/A" },
+                  { label: "City", value: data?.address?.city ?? "N/A" },
+                  { label: "Street", value: data?.address?.street ?? "N/A" },
+                  { label: "Building", value: data?.building ?? "N/A" },
+                  { label: "Floor Number", value: data?.floorNumber ?? "N/A" },
+                ]}
+              />
+            </Grid>
+            <Grid item size={4}>
+              <CippPropertyListCard
+                title="Details"
+                propertyItems={[
+                  { label: "Capacity", value: data?.capacity ?? "N/A" },
+                  { label: "Booking Type", value: data?.bookingType ?? "N/A" },
+                  { label: "Label", value: data?.label ?? "N/A" },
+                  { label: "Is Wheelchair Accessible", value: data?.isWheelChairAccessible ?? "N/A" },
+                ]}
+              />
+            </Grid>
+            <Grid item size={4}>
+              <CippPropertyListCard
+                title="Hardware"
+                propertyItems={[
+                  { label: "Phone", value: data?.phone ?? "N/A" },
+                  { label: "Audio Device Name", value: data?.audioDeviceName ?? "N/A" },
+                  { label: "Video Device Name", value: data?.videoDeviceName ?? "N/A" },
+                  { label: "Display Device Name", value: data?.displayDeviceName ?? "N/A" },
+                ]}
+              />
+            </Grid>
+          </Grid>
+        </Box>
+      )}
+    </HeaderedTabbedLayout>
+  );
+};
+
+Page.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>;
+
+export default Page;

src/pages/email/resources/management/room-lists/index.js

@@ -1,15 +1,17 @@
 import { Layout as DashboardLayout } from "/src/layouts/index.js";
 import { CippTablePage } from "/src/components/CippComponents/CippTablePage.jsx";
+import { EyeIcon } from "@heroicons/react/24/outline";
 
 const Page = () => {
   const pageTitle = "Room Lists";
   const apiUrl = "/api/ListRoomLists"
 
   const actions = [
     {
-      label: "View included Rooms",
-      link: `/email/resources/management/room-lists/list/view?roomAddress=[emailAddress]`,
+      label: "View Room List",
+      link: `/email/resources/management/room-lists/list/view?RoomListAddress=[emailAddress]`,
       color: "info",
+      icon: <EyeIcon />,
     },
   ];
 

src/pages/email/resources/management/room-lists/list/tabOptions.json

@@ -0,0 +1,6 @@
+[
+  {
+    "label": "View Roomlist",
+    "path": "/email/resources/management/room-lists/list/view"
+  }
+]

src/pages/email/resources/management/room-lists/list/view.jsx

@@ -1,28 +1,130 @@
 import { Layout as DashboardLayout } from "/src/layouts/index.js";
 import { useRouter } from "next/router";
 import { useSettings } from "/src/hooks/use-settings";
-import { CippTablePage } from "/src/components/CippComponents/CippTablePage.jsx";
+import { ApiGetCall } from "/src/api/ApiCall";
+import CippFormSkeleton from "/src/components/CippFormPages/CippFormSkeleton";
+import { Group, Mail } from "@mui/icons-material";
+import { HeaderedTabbedLayout } from "/src/layouts/HeaderedTabbedLayout";
+import tabOptions from "./tabOptions";
+import { CippCopyToClipBoard } from "/src/components/CippComponents/CippCopyToClipboard";
+import { Box, Stack } from "@mui/system";
+import Grid from "@mui/material/Grid2";
+import { CippBannerListCard } from "/src/components/CippCards/CippBannerListCard";
+import { CippPropertyListCard } from "/src/components/CippCards/CippPropertyListCard";
+import { useEffect, useState } from "react";
+import { EyeIcon } from "@heroicons/react/24/outline";
 
 const Page = () => {
   const userSettingsDefaults = useSettings();
   const router = useRouter();
-  const { roomAddress } = router.query;
-  const pageTitle = `Rooms included in ${roomAddress}`;
+  const { RoomListAddress } = router.query;
+  const [waiting, setWaiting] = useState(false);
+  useEffect(() => {
+    if (RoomListAddress) {
+      setWaiting(true);
+    }
+  }, [RoomListAddress]);
 
-  return (
-    <CippTablePage
-      title={pageTitle}
-      apiUrl= "/api/ListGraphRequest"
-      apiData={{
-        Endpoint: `/places/${roomAddress}/microsoft.graph.roomlist/rooms`,
+  const roomRequest = ApiGetCall({
+    url: `/api/ListRoomLists?PlaceListID=${RoomListAddress}&tenantFilter=${userSettingsDefaults.currentTenant}`,
+    queryKey: `PlaceList-${RoomListAddress}`,
+    waiting: waiting,
+  });
+
+  const listRequest = ApiGetCall({
+    url: "/api/ListGraphRequest",
+    data: {
+      Endpoint: `/places/${RoomListAddress}/microsoft.graph.roomlist/rooms`,
         tenantFilter: userSettingsDefaults.currentTenant,
         AsApp: true,
         manualPagination: true,
         $count: true,
         $top: 999,
-      }}
-      apiDataKey="Results"
-    />
+    },
+    queryKey: `list-${RoomListAddress}`,
+    waiting: waiting,
+  });
+
+  const title = roomRequest.isSuccess ? <>{roomRequest.data?.[0]?.displayName}</> : "Loading...";
+
+  const subtitle = roomRequest.isSuccess
+    ? [
+        {
+          icon: <Mail />,
+          text: <CippCopyToClipBoard type="chip" text={roomRequest.data?.[0]?.emailAddress} />,
+        },
+      ]
+    : [];
+
+  const data = roomRequest.data?.[0];
+
+  const listRoomItems = listRequest.isSuccess
+    ? [
+        {
+          id: 1,
+          cardLabelBox: {
+            cardLabelBoxHeader: <Group />,
+          },
+          text: "Roomlist Members",
+          subtext: "List of rooms included in this room list",
+          table: {
+            title: "Roomlist Members",
+            hideTitle: true,
+            actions: [
+              {
+                label: "View Room",
+                link: `/email/resources/management/list-rooms/place/view?PlaceAddress=[emailAddress]`,
+                color: "info",
+                icon: <EyeIcon />,
+              },
+            ],
+            data: listRequest?.data?.Results,
+          },
+        },
+      ]
+    : [];
+
+  return (
+    <HeaderedTabbedLayout
+      tabOptions={tabOptions}
+      title={title}
+      subtitle={subtitle}
+      isFetching={roomRequest.isLoading}
+    >
+      {roomRequest.isLoading && <CippFormSkeleton layout={[2, 1, 2, 2]} />}
+      {roomRequest.isSuccess && (
+        <Box
+          sx={{
+            flexGrow: 1,
+            py: 4,
+          }}
+        >
+          <Grid container spacing={2}>
+            <Grid item size={4}>
+              <CippPropertyListCard
+                title="Location"
+                propertyItems={[
+                  { label: "Phone", value: data?.address?.countryOrRegion ?? "N/A" },
+                  { label: "Country", value: data?.address?.state ?? "N/A" },
+                  { label: "State", value: data?.address?.postalCode ?? "N/A" },
+                  { label: "City", value: data?.address?.city ?? "N/A" },
+                  { label: "Street", value: data?.address?.street ?? "N/A" },
+                ]}
+              />
+            </Grid>
+            <Grid item size={8}>
+              <Stack spacing={3}>
+                <CippBannerListCard
+                  isFetching={listRequest.isLoading}
+                  items={listRoomItems}
+                  isCollapsible={listRoomItems.length > 0 ? true : false}
+                />
+              </Stack>
+            </Grid>
+          </Grid>
+        </Box>
+      )}
+    </HeaderedTabbedLayout>
   );
 };