HOSTSD-227 HSB user pages (#53)

src/dashboard/src/app/client/admin/page.tsx

@@ -1,3 +1,9 @@
+'use client';
+
+import { useSecureRoute } from '@/hooks';
+
 export default function Page() {
+  useSecureRoute((state) => state.isOrganizationAdmin, '/');
+
   return <div>Client Admin</div>;
 }

src/dashboard/src/app/client/admin/users/page.tsx

@@ -1,3 +1,9 @@
+'use client';
+
+import { useSecureRoute } from '@/hooks';
+
 export default function Page() {
+  useSecureRoute((state) => state.isOrganizationAdmin, '/');
+
   return <div>Client User Admin</div>;
 }

src/dashboard/src/app/client/dashboard/page.tsx

@@ -1,24 +1,10 @@
-import {
-  AllOrganizations,
-  AllocationByOS,
-  AllocationByStorageVolume,
-  AllocationTable,
-  SegmentedBarChart,
-  StorageTrendsChart,
-  TotalStorage,
-} from '@/components/charts';
-import { OperatingSystems } from '@/components/charts/allocationTable/constants';
+'use client';
+
+import { Dashboard } from '@/components';
+import { useSecureRoute } from '@/hooks';
 
 export default function Page() {
-  return (
-    <>
-      <AllOrganizations />
-      <StorageTrendsChart large={false} />
-      <AllocationByStorageVolume />
-      <TotalStorage />
-      <AllocationByOS />
-      <AllocationTable operatingSystem={OperatingSystems.Windows} />
-      <SegmentedBarChart />
-    </>
-  );
+  useSecureRoute((state) => state.isClient, '/');
+
+  return <Dashboard />;
 }

src/dashboard/src/app/client/servers/page.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { AllocationByStorageVolume, Col } from '@/components';
+import { useSecureRoute } from '@/hooks';
+import { useFilteredOrganizations, useFilteredServerItems } from '@/hooks/filter';
+
+export default function Page() {
+  useSecureRoute((state) => state.isClient, '/');
+
+  const { organizations } = useFilteredOrganizations();
+  const { serverItems } = useFilteredServerItems();
+
+  return (
+    <Col>
+      <h1></h1>All Servers
+      <AllocationByStorageVolume organizations={organizations} serverItems={serverItems} />
+    </Col>
+  );
+}

src/dashboard/src/app/hsb/admin/organizations/page.tsx

@@ -1,3 +1,9 @@
+'use client';
+
+import { useSecureRoute } from '@/hooks';
+
 export default function Page() {
+  useSecureRoute((state) => state.isSystemAdmin, '/');
+
   return <div>HSB Organization Admin</div>;
 }

src/dashboard/src/app/hsb/admin/users/page.tsx

@@ -2,25 +2,15 @@
 
 import styles from './Users.module.scss';
 
-import {
-  Button,
-  Checkbox,
-  Info,
-  Overlay,
-  Row,
-  Select,
-  Sheet,
-  Spinner,
-  Table,
-  Text,
-} from '@/components';
-import { IUserModel } from '@/hooks';
+import { Button, Checkbox, Info, Overlay, Select, Sheet, Spinner, Table, Text } from '@/components';
+import { IUserModel, useSecureRoute } from '@/hooks';
 import { useApiUsers } from '@/hooks/api/admin';
 import { useGroups, useUsers } from '@/hooks/data';
 import React from 'react';
 import { IUserForm } from './IUserForm';
 
 export default function Page() {
+  useSecureRoute((state) => state.isSystemAdmin, '/');
   const { isReady: isReadyUsers, users } = useUsers({ includeGroups: true });
   const { isReady: isReadyGroups, groups, options: groupOptions } = useGroups();
   const { update: updateUser } = useApiUsers();
@@ -81,104 +71,104 @@ export default function Page() {
   }, [updateUser, records]);
 
   return (
-    <Sheet >
+    <Sheet>
       <div className={styles.container}>
-      {loading && (
-        <Overlay>
-          <Spinner />
-        </Overlay>
-      )}
-      <div className={styles.section}>
-        <Info>
-          Find a user by name, username, or email. Click checkbox to enable user access to dashboard
-          for selected group(s).
-        </Info>
-        <div className={styles.search}>
-          <Text
-            name="search"
-            placeholder="Search"
-            iconType="search"
-            onChange={(e) => setFilter(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.code === 'Enter') handleSearch();
+        {loading && (
+          <Overlay>
+            <Spinner />
+          </Overlay>
+        )}
+        <div className={styles.section}>
+          <Info>
+            Find a user by name, username, or email. Click checkbox to enable user access to
+            dashboard for selected group(s).
+          </Info>
+          <div className={styles.search}>
+            <Text
+              name="search"
+              placeholder="Search"
+              iconType="search"
+              onChange={(e) => setFilter(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.code === 'Enter') handleSearch();
+              }}
+            />
+            <Button variant="secondary" onClick={() => handleSearch()}>
+              Search
+            </Button>
+          </div>
+        </div>
+        <div className={styles.table}>
+          <Table
+            data={items}
+            header={
+              <>
+                <div>Username</div>
+                <div>Email</div>
+                <div>Name</div>
+                <div className={styles.tableHeader}>Enabled</div>
+                <div>Groups</div>
+              </>
+            }
+          >
+            {({ data }) => {
+              return (
+                <>
+                  <div>{data.username}</div>
+                  <div>{data.email}</div>
+                  <div>{data.displayName}</div>
+                  <div className={styles.checkbox}>
+                    <Checkbox
+                      checked={data.isEnabled}
+                      onChange={(e) => {
+                        setRecords((records) =>
+                          records.map((r) =>
+                            r.id === data.id
+                              ? { ...data, isEnabled: e.target.checked, isDirty: true }
+                              : r,
+                          ),
+                        );
+                      }}
+                    />
+                  </div>
+                  <div className={styles.groupsSelect}>
+                    <Select
+                      options={groupOptions}
+                      className={styles.multiSelect}
+                      placeholder="Select one or more"
+                      multiple
+                      value={data.groups?.map((g) => g.id.toString())}
+                      onChange={(values) => {
+                        if (Array.isArray(values)) {
+                          setRecords((users) =>
+                            users.map((u) =>
+                              u.id === data.id
+                                ? {
+                                    ...u,
+                                    groups: groups.filter((g) => values?.some((v) => v == g.id)),
+                                    isDirty: true,
+                                  }
+                                : u,
+                            ),
+                          );
+                        }
+                      }}
+                    />
+                  </div>
+                </>
+              );
             }}
-          />
-          <Button variant="secondary" onClick={() => handleSearch()}>
-            Search
+          </Table>
+        </div>
+        <div className={styles.footer}>
+          <Button
+            onClick={async () => await handleUpdate()}
+            disabled={isSubmitting || !records.some((r) => r.isDirty)}
+          >
+            Save
           </Button>
         </div>
       </div>
-      <div className={styles.table}>
-      <Table
-        data={items}
-        header={
-          <>
-            <div>Username</div>
-            <div>Email</div>
-            <div>Name</div>
-            <div className={styles.tableHeader}>Enabled</div>
-            <div>Groups</div>
-          </>
-        }
-      >
-        {({ data }) => {
-          return (
-            <>
-              <div>{data.username}</div>
-              <div>{data.email}</div>
-              <div>{data.displayName}</div>
-              <div className={styles.checkbox}>
-                <Checkbox
-                  checked={data.isEnabled}
-                  onChange={(e) => {
-                    setRecords((records) =>
-                      records.map((r) =>
-                        r.id === data.id
-                          ? { ...data, isEnabled: e.target.checked, isDirty: true }
-                          : r,
-                      ),
-                    );
-                  }}
-                />
-              </div>
-              <div className={styles.groupsSelect}>
-                <Select
-                  options={groupOptions}
-                  className={styles.multiSelect}
-                  placeholder="Select one or more"
-                  multiple
-                  value={data.groups?.map((g) => g.id.toString())}
-                  onChange={(values) => {
-                    if (Array.isArray(values)) {
-                      setRecords((users) =>
-                        users.map((u) =>
-                          u.id === data.id
-                            ? {
-                                ...u,
-                                groups: groups.filter((g) => values?.some((v) => v == g.id)),
-                                isDirty: true,
-                              }
-                            : u,
-                        ),
-                      );
-                    }
-                  }}
-                />
-              </div> 
-            </>
-          );
-        }}
-      </Table>
-      </div>
-      <div className={styles.footer}>
-        <Button
-          onClick={async () => await handleUpdate()}
-          disabled={isSubmitting || !records.some((r) => r.isDirty)}
-        >
-          Save
-        </Button>
-      </div>
-      </div>
     </Sheet>
   );
 }