api/router/rest/index.js

@@ -0,0 +1,6 @@
+import express from 'express';
+import { userDataRouter } from './userData/index.js';
+
+export const restRouter = express.Router();
+
+restRouter.use('/userData', userDataRouter);

api/router/rest/userData/index.js

@@ -0,0 +1,17 @@
+import express from 'express';
+import { databaseServices } from '../../../services/index.js';
+
+export const userDataRouter = express.Router();
+
+userDataRouter.get('/', async (req, res) => {
+  let data;
+  try {
+    data = await databaseServices.getUsers(req.query);
+    res.status(200);
+  } catch (err) {
+    data = { Error: err?.message };
+    res.status(500);
+  } finally {
+    res.send(data);
+  }
+})

api/router/routes.js

@@ -0,0 +1,6 @@
+import express from 'express';
+import { restRouter } from './rest/index.js';
+
+export const routes = express.Router();
+
+routes.use('/rest', restRouter);

api/services/connection.js

@@ -0,0 +1,27 @@
+import { Pool } from 'pg';
+import 'dotenv/config';
+
+const poolCreds = {
+  host: process.env.POSTGRES_HOST,
+  database: process.env.POSTGRES_DB,
+  port: process.env.POSTGRES_PORT,
+  user: process.env.POSTGRES_USER,
+  password: process.env.POSTGRES_PASSWORD,
+  ssl:
+    process.env.APP_ENV === 'local'
+      ? null
+      : { require: true, rejectUnauthorized }
+};
+
+const pool = new Pool(poolCreds);
+
+export const runQuery = async (query, params = []) => {
+  const client = await pool.connect();
+
+  try {
+    const pgQueryResponse = await client.query(query, params);
+    return pgQueryResponse?.rows || [];
+  } finally {
+    client.release();
+  }
+}

api/services/department/index.js

@@ -0,0 +1,14 @@
+import express from 'express';
+const router = express.Router();
+
+// GET /api/departments
+router.get('/', (req, res) => {
+    res.json([{ id: 1, name: 'Fire Department' }]);
+});
+
+// POST /api/departments
+router.post('/', (req, res) => {
+    res.status(201).json({ message: 'Department created' });
+});
+
+export default router;

api/services/operations/userData.js

@@ -0,0 +1,15 @@
+import { runQuery } from '../connection.js';
+
+const getUsers = async (args) => {
+  try {
+    const dataResp = await runQuery('SELECT * FROM users');
+    return dataResp;
+  } catch (err) {
+    console.log('GET USERS ERROR: ', err);
+    throw err;
+  }
+};
+
+export const userDataOperations = {
+  getUsers
+}

api/services/user/index.js

@@ -0,0 +1,16 @@
+import express from 'express';
+const router = express.Router();
+
+// GET /api/users
+router.get('/', (req, res) => {
+    res.json([{ id: 1, name: 'John Doe' }]);
+});
+
+// POST /api/users
+router.post('/', (req, res) => {
+    res.status(201).json({ message: 'User created' });
+});
+
+// Add more routes like PUT, DELETE here later
+
+export default router;

web/components/common/TransferBox/TransferBox.jsx

@@ -194,7 +194,8 @@ export const TransferBox = ({ fields, leftGroup, rightGroup, onSave, user={} })
         </CenterButton>
         <CenterButton
           onClick={() => {
-            return onSave(rightItems?.map((item) => { return item?.id }))
+            onSave(rightItems?.map((item) => { return item?.id }));
+            setItemSelected({});
           }}
           color='#00B33C'
           buttonEnabled={hasChanges}

web/components/stores/useLocalStore.js

@@ -5,4 +5,6 @@ export const useLocalStore = create((set) => ({
   setUser: (user) => set({ user }),
   department: null,
   setDepartment: (department) => set({ department }),
+  access: null,
+  setAccess: (access) => set({ access }),
 }));

web/src/pages/Settings/Settings.jsx

@@ -136,6 +136,7 @@ const InnerCardRowLabel = styled('label')`
   width: 60%;
   padding-right: 10px;
   font-size: 14px;
+  align-items: center;
 `;
 
 const InnerCardRowInput = styled('input')`
@@ -152,6 +153,7 @@ const InnerCardRadioInput = styled('input')`
 const InnerCardRadioLabel = styled('label')`
   font-size: 14px;
   padding-left: 5px;
+  align-items: center;
 `;
 
 const InnerCardRowRadioDiv = styled('div')`
@@ -451,7 +453,9 @@ export const Settings = () => {
                             fields={field}
                             leftGroup={department[field?.origList]}
                             rightGroup={department[field?.id]}
-                            onSave={(t) => console.log(t)}
+                            onSave={(t) => {
+                              return onSubmit({ [field.id]: t });
+                            }}
                           />
                         }
                         return field?.type !== 'header' && (

web/src/router/AppRouter.jsx

@@ -3,7 +3,7 @@ import { Routes, Route } from 'react-router-dom';
 import { Home, Profile, Schedule, Settings } from '@src/pages';
 import { Shell } from '@components';
 import { useLocalStore } from '@components';
-import axios from "axios";
+import { fetchAPI } from './axios.js';
 
 const dept = {
   id: 1,
@@ -31,6 +31,7 @@ const users = [
     first_name: 'ShiftSync-Administrator',
     last_name: 'Test-User',
     email: 'testuserA@shift-sync.com',
+    accessLevel: 150,
     is_ss_admin: false
   },
   {
@@ -38,6 +39,7 @@ const users = [
     first_name: 'ShiftSync-Manager',
     last_name: 'Test-User',
     email: 'testuserM@shift-sync.com',
+    accessLevel: 100,
     is_ss_admin: false
   },
   {
@@ -45,6 +47,7 @@ const users = [
     first_name: 'ShiftSync-Scheduler',
     last_name: 'Test-User',
     email: 'testuserS@shift-sync.com',
+    accessLevel: 50,
     is_ss_admin: false
   },
   {
@@ -52,65 +55,66 @@ const users = [
     first_name: 'ShiftSync-User',
     last_name: 'Test-User',
     email: 'testuserU@shift-sync.com',
+    accessLevel: 1,
     is_ss_admin: false
   },
-]
+];
 
 const AppRouter = () => {
   const { user, setUser, setDepartment } = useLocalStore();
   const [userChanged, setUserChanged] = useState(false);
-  const isDev = true; // change for it.
-
-  const fetchAPI = async () => {
-    const location = window.location;
-    const uri = `${location?.protocol}//${location.hostname}/api`;
-    const response = await axios.get(uri);
-    console.log(response.data.fruits);
-  };
 
   useEffect(() => {
+    const init = async () => {
       const localVersion = localStorage.getItem("APP_VERSION");
       const currentVersion = window.APP_VERSION;
 
       if (localVersion && localVersion !== currentVersion) {
         console.log("Version changed, forcing reload");
         localStorage.setItem("APP_VERSION", currentVersion);
-      window.location.reload(true); // force full page reload
+        window.location.reload(true);
+        return;
       } else {
         localStorage.setItem("APP_VERSION", currentVersion);
       }
 
-    fetchAPI();
-    // await call for getting the count of employees and any other calls to db.
+      const data = await fetchAPI('userData', 'get');
+      console.log('data:', data);
+
+      // TODO: Replace this with real data from your API
+      // const users = data?.users || [];   // Example fix
+      // const dept = data?.dept || {};     // Example fix
+
       const employee_count = 1;
       const subs_expiration = '10/22/2025';
+
       setUser({
         ...users[0],
         scheduler: dept?.schedulers?.includes(1),
         manager: dept?.managers?.includes(1),
         administrator: dept?.administrators?.includes(1)
       });
+
       const newAdministrators = dept?.administrators?.map((admin) => {
-      const user = users?.find((user) => {
-        return user?.id === admin;
-      });
+        const user = users?.find((user) => user?.id === admin);
         return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
       });
+
       const newManagers = dept?.managers?.map((manager) => {
-      const user = users?.find((user) => {
-        return user?.id === manager;
-      });
+        const user = users?.find((user) => user?.id === manager);
         return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
       });
+
       const newSchedulers = dept?.schedulers?.map((scheduler) => {
-      const user = users?.find((user) => {
-        return user?.id === scheduler;
-      });
-      return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
-    });
-    const newUsers = users?.map((user) => {
+        const user = users?.find((user) => user?.id === scheduler);
         return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
       });
+
+      const newUsers = users?.map((user) => ({
+        id: user?.id,
+        value: `${user?.last_name}, ${user?.first_name}`
+      }));
+
       setDepartment({
         ...dept,
         users: newUsers,
@@ -120,6 +124,9 @@ const AppRouter = () => {
         employee_count,
         subs_expiration
       });
+    };
+
+    init();
   }, []);
 
   useEffect(() => {

web/src/router/axios.js

@@ -0,0 +1,27 @@
+import axios from 'axios';
+
+export const fetchAPI = async (endpoint, type, body = null) => {
+  const location = window.location;
+  const url = `${location?.protocol}//${location.hostname}${location?.hostname === 'localhost' ? ':5172' : ''}/api/rest/${endpoint}`;
+
+  const requestOptions = {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  };
+
+  try {
+    let response;
+    if (type === 'post') {
+      response = await axios.post(url, body, requestOptions);
+    } else if (type === 'get') {
+      response = await axios.get(url, requestOptions);
+    } else {
+      console.warn('No proper type given: ', type);
+      return;
+    }
+    return response.data;
+  } catch (err) {
+    console.error('PG Rest Query Error: ', err);
+  }
+};