EPICSYSTEM-224: Create an empty landing page for staff with create staff button

compliance-web/src/App.tsx

@@ -6,6 +6,8 @@ import { AuthProvider } from "react-oidc-context";
 import { OidcConfig } from "@/utils/config";
 import { theme } from "@/styles/theme";
 import RouterProviderWithAuthContext from "@/router";
+import ModalProvider from "@/components/Shared/Modals/ModalProvider";
+import SnackBarProvider from "@/components/Shared/SnackBarProvider";
 
 const queryClient = new QueryClient();
 
@@ -15,6 +17,8 @@ function App() {
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
           <AuthProvider {...OidcConfig}>
+            <ModalProvider />
+            <SnackBarProvider />
             <RouterProviderWithAuthContext />
           </AuthProvider>
         </ThemeProvider>

compliance-web/src/components/Shared/Modals/ModalProvider.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Box, Modal } from "@mui/material";
+import { useModal } from "@/store/modalStore";
+
+const ModalProvider: React.FC = () => {
+  const { modalContent, setClose, isOpen } = useModal();
+
+  return (
+    <Modal open={isOpen} onClose={setClose}>
+      <Box>{modalContent}</Box>
+    </Modal>
+  );
+};
+
+export default ModalProvider;

compliance-web/src/components/Shared/SideNav/RouteItemsList.tsx

@@ -1,4 +1,4 @@
-import { Assessment, Settings, List } from "@mui/icons-material";
+import { FormatListBulletedRounded, AssessmentRounded, SettingsRounded } from "@mui/icons-material";
 
 export interface RouteMenuItem {
   routeName: string;
@@ -11,7 +11,7 @@ export default function RouteItemsList() {
   const routeMenuItems: RouteMenuItem[] = [
     {
       routeName: "C&E Database",
-      icon: <List />,
+      icon: <FormatListBulletedRounded />,
       subRoutes: [
         {
           routeName: "Case Files",
@@ -30,11 +30,11 @@ export default function RouteItemsList() {
     {
       routeName: "IR Board",
       path: "/ir-board",
-      icon: <Assessment sx={{ transform: "rotate(180deg)" }} />,
+      icon: <AssessmentRounded sx={{ transform: "rotate(180deg)" }} />,
     },
     {
       routeName: "Admin",
-      icon: <Settings />,
+      icon: <SettingsRounded />,
       subRoutes: [
         {
           routeName: "Staff",

compliance-web/src/components/Shared/SnackBarProvider.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Snackbar, Alert } from "@mui/material";
+import { useSnackbar } from "@/store/snackbarStore";
+
+const SnackBarProvider: React.FC = () => {
+  const { isOpen, setClose, severity, message } = useSnackbar();
+
+  return (
+    <Snackbar
+      open={isOpen}
+      autoHideDuration={3000}
+      onClose={setClose}
+      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+    >
+      <Alert
+        onClose={setClose}
+        severity={severity}
+        variant="filled"
+        sx={{ width: "100%" }}
+      >
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default SnackBarProvider;

compliance-web/src/routes/_authenticated/admin/staff.tsx

@@ -1,10 +1,24 @@
-import ComingSoon from '@/components/Shared/ComingSoon';
-import { createFileRoute } from '@tanstack/react-router'
+import { AddRounded } from "@mui/icons-material";
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { createFileRoute } from "@tanstack/react-router";
+import { BCPalette } from "epic.theme";
 
-export const Route = createFileRoute('/_authenticated/admin/staff')({
-  component: Staff
-})
+export const Route = createFileRoute("/_authenticated/admin/staff")({
+  component: Staff,
+});
 
 function Staff() {
-  return <ComingSoon />;
+  return (
+    <>
+      <Stack>
+        <Box display={"flex"} justifyContent={"space-between"} alignItems={"center"}>
+          <Typography variant="h5" sx={{ color: BCPalette.typography.link }}>
+            Staff
+          </Typography>
+          <Button startIcon={<AddRounded />}>Staff Member</Button>
+        </Box>
+        {/* <Box sx={{ background: BCPalette.theme.gray[30], marginTop: "1.5rem" }}>Table</Box> */}
+      </Stack>
+    </>
+  );
 }

compliance-web/src/store/modalStore.ts

@@ -0,0 +1,31 @@
+import {create} from 'zustand'
+
+// Define the store state and actions
+interface ModalStore {
+  isOpen: boolean
+  modalContent: React.ReactNode | null
+  setOpen: (modal: React.ReactNode) => Promise<void>
+  setClose: () => void
+}
+
+// Create the Zustand store
+export const useModal = create<ModalStore>((set) => ({
+  isOpen: false,
+  modalContent: null,
+
+  setOpen: async (modal) => {
+    if (modal) {
+      set(() => ({
+        modalContent: modal,
+        isOpen: true,
+      }))
+    }
+  },
+
+  setClose: () => {
+    set({
+      isOpen: false,
+      modalContent: null,
+    })
+  },
+}))

compliance-web/src/store/snackbarStore.ts

@@ -0,0 +1,31 @@
+import { create } from "zustand";
+
+interface SnackbarState {
+  isOpen: boolean;
+  severity: "success" | "error" | "warning" | "info";
+  message: string;
+  setOpen: (
+    message: string,
+    severity?: "success" | "error" | "warning" | "info",
+  ) => void;
+  setClose: () => void;
+}
+
+export const useSnackbar = create<SnackbarState>((set) => ({
+  isOpen: false,
+  severity: "success", // default severity
+  message: "",
+  setOpen: (message, severity = "success") =>
+    set({ isOpen: true, message, severity }),
+  setClose: () => set({ isOpen: false }),
+}));
+
+// Helper function to notify with different severities
+export const notify = {
+  success: (message: string) =>
+    useSnackbar.getState().setOpen(message, "success"),
+  error: (message: string) => useSnackbar.getState().setOpen(message, "error"),
+  warning: (message: string) =>
+    useSnackbar.getState().setOpen(message, "warning"),
+  info: (message: string) => useSnackbar.getState().setOpen(message, "info"),
+};